vue cli4 全局scss变量技巧

今天啃了下官方文档，加上之前也配置到webpack的，有一些经验，我觉得官方可能有对应的方式，毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了，都不用安装啥插件。

于是乎，果然，官方有，但是文档很蛋疼，你能看懂引入单个全局，没有多个全局的示例，索性自己写个笔记了。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/base/assets/scss/global.scss";
          @import "~@/base/assets/scss/reset.scss";
        `
      }
    }
  }
}

prependData这键名不同版本的sass-loader还不一样，注意下：

• sass-loader <= 8; 键名是：data
• sass-loader = 8；键名是：prependData
• sass-loader >= 10；键名是：additionalData

好家伙！！！

prependData除了像上述这种字符格式外，还可以使用函数，具体自便查询：文档