在vue cli 3生成的項目中設置less ,sass, stylus的全局變量

如題：

其實看官方文檔我們知道可以使用style-resources-loader這個loader來設置自動化導入

在每一個關於stylus的文件中導入想要的導入的文件，你也可以設置為在每一個sass或者less文件中導入

但是這是新增了一條規則，來處理自動化導入。

有沒有其他方式呢？那就是向預處理器傳遞選項

當然，我們還可以設置vue.config.js配置來達到全局引用效果

一、在sass中，

查閱官方文檔 

 

 二、在less中

通過查看less的文檔，我們知道有 

Global Variables 這個選項

所以：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          color: '#ccc'
        }
      }
    }
  }
}

 

三、在stylus中

// vue.config.js
var path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: path.resolve(__dirname, './src/styles/global.styl')
      },
    }
  }
}

 

設置完之后我們可以通過

vue inspect --rule stylus

命令來審查對應的loader規則