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 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景6 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘7 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)7 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中8 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi8 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X9 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123410 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js