vue stylus怎么配

在Vue项目中配置和使用Stylus的方法如下：

安装Stylus和Stylus-loader： 你需要先安装stylus和stylus-loader。可以通过npm或yarn来安装：

npm install stylus stylus-loader --save-dev

或者使用cnpm：

cnpm install stylus stylus-loader --save-dev

在Vue组件中使用Stylus： 在.vue文件的<style>标签中，通过设置lang="stylus"来使用Stylus：

<style lang="stylus">
// 你的Stylus代码
</style>

引入全局Stylus样式： 你可以创建一个全局的Stylus文件，比如variables.styl，然后在需要的组件中通过@import引入：

// variables.styl
$bgColor = #00bcd4

<style lang="stylus">
@import '~path/to/variables.styl';
</style>

配置全局变量： 如果你想在全局范围内使用Stylus变量，可以通过修改build/utils.js文件来实现：

const stylusOptions = {
 import: [path.join(__dirname, '../src/assets/style/public.styl')]
};

然后在return语句中配置Stylus使用这些变量：

stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)

使用Stylus的自动px转rem功能： Stylus有一个非常实用的功能，它可以自动将px单位转换为rem单位，这在开发响应式布局时非常有用。

在main.js中引入Stylus文件： 你也可以在项目的入口文件main.js中引入Stylus文件，使其成为全局样式：

import '@/assets/css/reset.styl'

配置别名： 为了方便引入Stylus文件，你可以在项目的webpack配置文件中配置别名，比如：

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
   '@': resolve('src'),
   'common': resolve('src/common')
 }
}

这样你就可以在Vue项目中愉快地使用Stylus了。