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";
        `
      }
    }
}
相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰14 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼15 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安16 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队16 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好16 小时前
pinia从定义到运用
前端·vue.js
代码小学僧16 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜17 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥20 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT1 天前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js