vue项目中使用scss全局变量

vue使用scss全局变量时报错:

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

错误原因:ValidationError:选项对象无效。已使用与API架构不匹配的选项对象初始化Sass加载程序。

查看package.json中Sass Loader的版本,根据sass-loader版本不同,vue.config.js中配置字段分别为 data、prependData、additionalData若都不能解决可以查看下方官方文档链接中是否字段已更新。

文档说明:

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

package.json

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.0",
  },

vue.config.js

module.exports={
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/_variable.scss";`
      }
    }
  }

}

你可能感兴趣的:(报错,vue,css,scss,sass,前端)