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的版本解決的。