vue项目中使用scss全局变量

2021-07-14 22:33:57 阅读：257 来源： 互联网

标签：scss 4.5 vue E9% cli sass E5% 全局变量

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，若都不能解决可以查看上方官方文档链接。

标签：scss,4.5,vue,E9%,cli,sass,E5%,全局变量
来源： https://blog.csdn.net/weixin_59128282/article/details/118738641

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目中使用scss全局变量