VUE-CLI配置全局SCSS变量

一.引入node-sasssass-loader依赖

javascript 复制代码
npm install --save-dev sass-loader node-sass

二. 在项目根目录中创建一个scss变量文件,比如constant.scss

三.在vue.config.js文件中引入这个变量文件:

javascript 复制代码
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/utils/css/constant.scss";`
      }
    }
  }
};

四.版本错误的配置

sass-loader版本问题引发的错误:options has an unknown property 'prependData'. These properties are valid

当前版本如下:

复制代码
"sass": "^1.32.7",
"sass-loader": "^12.0.0",

原来的写法:

javascript 复制代码
css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/utils/css/constant.scss";'
      }
    }
}

修改后(生效):

javascript 复制代码
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      
      sass: {
        additionalData: '@import "@/utils/css/constant.scss";'
      }
    },
  }
})

多个文件全局配置

javascript 复制代码
css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/style/utils/_variables.scss";
        @import "@/style/utils/mixin.scss";
        `
      }
    }
}
相关推荐
爱的叹息3 小时前
Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比,包含关键方法的详细说明和表格总结
前端·javascript·vue.js
肠胃炎3 小时前
Vue:mixin详解
前端·javascript·vue.js
北溟鱼鱼鱼3 小时前
组件通信方案总结
vue.js
前端大白话3 小时前
Vue3开发老踩坑?10个实战技巧助你突围
前端·javascript·vue.js
秋天的一阵风4 小时前
Webpack 插件开发:为 Vue.js 应用实现图片预加载
前端·vue.js·webpack
拖孩5 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
洪洪呀6 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
萌萌哒草头将军13 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中14 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊14 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint