如何在 vue 2.0+ 中引入全局的stylus文件，且能正常

由于stylus在引用时，不能像一般的css文件直接在main.js中引用，就算引用了也会只能使用转换后的css，不能使用里面的函数，方法等，原因可能是：在这里引入会被直接编译成css，不能在别的模板中引用一些函数啥的；所以夏敏介绍怎么全局引用。

一：先更改脚手架项目中的build -- webpack.base.conf.js 去让项目能够正常使用stylus,具体更改如下：

先安装 npm i  style-loader  stylus  stylus-loader css-loader -S

module.exports = {

    。。。。。
    

    
    resolve: {
    extensions: ['.js', '.vue', '.json', '.styl'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /.styl$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'stylus-loader' }],
        include: []
      },
    
    。。。。。。
}

二：打开vue-cli脚手架项目里面的 build --- utils.js 文件，具体位置如下：

然后对这个文件进行下面的修改，来全局引入想要引入的全局使用的stylus文件：

exports.cssLoaders = function(options) {
    
        ...........  //原来的部分不用修改的，省略号代替
    
         var stylusOptions = {
        import: [
            path.join(__dirname, "../src/common/stylus/mixin.styl") // variables.styl全局变量文件
        ],
        paths: [
            path.join(__dirname, "../src/common/"),
            path.join(__dirname, "../")
        ]
    }     //上面都是新加的内容，我这里是要引入 ../src/common/stylus/mixin.styl  这个全局的styl文件，来使用
 

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus', stylusOptions),  //这个也是需要新加上的
        styl: generateLoaders('stylus', stylusOptions)     //这个也是需要新加上的
    }
    
        }    

这样就可以在所有的vue模块中去使用这个stylus文件里面的样式和函数，方法等

注意，需要先安装 npm i stylus-loader --save-dev  和 npm i stylus --save-dev