How to Solve Vue cli configuration SCSS global variable error

It is configured according to the online tutorial, but it still reports errors. The error information is as follows:

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

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

Baidu has a problem with the version of SASS loader
// in sass version 9, additionaldata is used, in sass version 8, prependdata is used, and in other versions, data
my version is 7.1.0, so finally changing the key name to data solves the problem


in vue.config.js, the configuration is as follows:

module.exports = {
    ...
	css: {
	  //   extract: true // Whether to use the css separation plugin ExtractTextPlugin (open skeleton screen must be this configuration)
	    // css presetter configuration item
	    // use additionalData in sass version 9 use prependData in version 8, other versions, use data
	    // semicolon here; required
	    loaderOptions: {
	      sass: {
	        data: '@import "./src/styles/variables.scss";'
	      }
	    },
	  },
	 ...
},

Note: semicolon after the configuration file path; Media query expression must begin with ‘(‘

Read More: