vue-cli项目中安装配置stylus-loader（vue-cli2）

安装stylus stylus-loader

 npm install stylus stylus-loader@3.0.0 --save-dev

　配置webpack.base.config.js

{
	  test: /\.styl$/,
	  loader: 'style-loader!css-loader!stylus-loader',
	  include: []
 },

vue文件中引用stylus文件（以.styl命名）
（1）在js中通过

import '@/assets/stylus/common.styl'

（2）在style中

@import './assets/stylus/varibles.styl'

全局变量配置：

• 在每个vue文件中单独引入varibles.styl，但重复性大，并且不利于维护

• 打开build/utils.js中更改

/在generateLoaders方法的后面
const stylusOptions = {
    import: [
        path.join(__dirname, "../src/assets/stylus/varibles.styl") // variables.styl全局变量文件
    ],
    paths: [
        path.join(__dirname, "../src/assets"),
        path.join(__dirname, "../")
    ]
}
//在后面的return中添加
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)
//或把原来的(如下)，修改成上面的样子
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')

重启服务

如果出现以下问题：ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema.可能是由于stylus-loader版本问题过高导致，可以通过降低stylus-loader的版本解决，之前使用less语法，安装less-loader的时候也遇到同样的问题，同样是通过降低less-loader的版本解决的。