scss全局引入的坑

最近为了优化项目规范，给老项目增加一个scss的全局样式规范，配合ui规范的落地，于是使用了scss变量的功能。想到每个文件都引入一次变量文件就很烦，于是使用vue-cli的webpack配置，通过配置在每个scss的样式上自动引入变量文件。

环境 sass-loader 7.* vue-cli

通过官网文档## 向预处理器 Loader 传递选项的引导配置了一下，发现不work！文档中还特地说明

     // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`

原来， sass-loaderv7以下又是不同的配置字段 最后找到对应的配置项

module.exports = {
    ...
	css: {
	    // sass v9中使用additionalData, v8中使用prependData, 其他版本使用data
	    //这里的分号；必填
	    loaderOptions: {
	      sass: {
	        data: '@import "@/styles/variables.scss";'
	      }
	    },
	  },
	 ...
},

又是被版本坑了的一天~