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";
        `
      }
    }
}
相关推荐
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
爱电摇的小码农3 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
Tttian6224 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉4 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi74 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆5 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
拾光拾趣录6 小时前
虚拟DOM超详细流程
前端·vue.js·dom
拾光拾趣录6 小时前
Vue 项目监听页面 Hash 变化
前端·vue.js·vue-router
梨子同志6 小时前
Vue Options API vs Composition API
前端·vue.js
梨子同志7 小时前
Vue v-model 指令详解
前端·vue.js