如何在 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