vue项目中使用scss全局变量

本文主要是介绍vue项目中使用scss全局变量，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

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";`
      }
    }
  }

}

文档说明：

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版本不同，字段分别为 data、prependData、additionalData，若都不能解决可以查看上方官方文档链接。

这篇关于vue项目中使用scss全局变量的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！