vue cli配置scss全局变量报错问题解决

按网上教程配置了，但是还是一直报错，报错信息如下：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    width: $sideBarWidth !important;
          ^
      Undefined variable: "$sideBarWidth".

百度了一波，原来是sass-loader的版本的问题
// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData，其他版本，使用data
我的版本是7.1.0的，所以最后把键名改成data就就解决了

在vue.config.js中如下配置：

module.exports = {
    ...
	css: {
	  //   extract: true // 是否使用css分离插件 ExtractTextPlugin（开启骨架屏必须这个配置）
	    // css预设器配置项
	    // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData,其他版本，使用data
	    //这里的分号；必填
	    loaderOptions: {
	      sass: {
	        data: '@import "./src/styles/variables.scss";'
	      }
	    },
	  },
	 ...
},

注意：配置文件路径后面的分号；是必填的，否则会报错Media query expression must begin with ‘(’