stylus全局引入vue-li3项目

1、安装：

npm i style-resources-loader -D

2、如果没有vue.config.js文件，请自行创建，位置是项目的根目录！

3、创建完成后在vue.config.js里设置：

module.exports ={

  chainWebpack: config =>{

    const types =['vue-modules', 'vue', 'normal-modules', 'normal']

    types.forEach(type =>addStyleResource(config.module.rule('stylus').oneOf(type)))

  },

}

function addStyleResource (rule) {

  rule.use('style-resource')

      .loader('style-resources-loader')

      .options({

        patterns:[

          path.resolve(__dirname, './src/styles/imports.styl'),

        ],

      })

}

其中：patterns中的路径是你需要引入的stylus路径

4、main.js中引入

import './styles/imports.styl';

5、设置一个全局的变量测试一下：

在imports.styl文件中，设置一个变量：

$mainCorler =red;

6、去组件中引用一下，试试：

app.vue中

color $mainCorler

7、ok了！在main.js中引入了，每个组件中就不需要再单独引用了，这样我们在做一些开发或者修改的时候就easy多了。