目录

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";
        `
      }
    }
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
sunn。11 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
Heidi__13 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
Monly2115 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
工业互联网专业17 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
前端小趴菜0517 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
Eva21566519 小时前
Flask+Vue构建图书管理系统及Echarts组件的使用
vue.js·flask·echarts
艾克马斯奎普特21 小时前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
fayeyoko1 天前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js
醋醋1 天前
vue2源码记录(2)
前端·vue.js
艾克马斯奎普特1 天前
Vue.js 3 渐进式实现之响应式系统——第五节:分支切换与 cleanup
前端·vue.js