[解决]ValidationError: Invalid opt

在 Vue 项目中的vue.config.js文件里引入 Sass 全局样式变量时，发生报错，具体文件配置如下

package.json 中

"dependencies": {
   "core-js": "^3.6.4",
   "vue": "^2.6.11"
},
"devDependencies": {
   "@vue/cli-plugin-babel": "^4.3.0",
   "@vue/cli-plugin-unit-mocha": "^4.3.0",
   "@vue/cli-service": "^4.3.0",
   "@vue/test-utils": "1.0.0-beta.31",
   "chai": "^4.1.2",
   "node-sass": "^4.13.1",
   "sass-loader": "^8.0.2",
   "vue-template-compiler": "^2.6.11"
}

vue.config.js 中

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/global.scss";`
      }
    }
  }
}

然后 npm run serve 后，遇到报错

 error  in ./src/components/Button/SButton.vue?vue&type=style&index=0&id=1d68e5b8&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

查看了 vue cli 官方文档https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
发现，sass-loader v7 以上的版本，将选项名从 data 更改为 prependData

修改 vue.config.js 文件

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/styles/global.scss";`
      }
    }
  }
}

@import "@/assets/styles/global.scss";这个后面一定要加分号，不然会收到这样的报错

SassError: media query expression must begin with '('