vue全局使用sass变量

需求:框架需要使用scss,之后不想把很多重复的css一个一个写,就提取出来咯,到时候只需要更改scss文件就可以了,不用一个一个的找

1.下载sass

这我下的俩个版本,如果你们下载最新版不兼容可以参考我的版本下载

"sass": "^1.66.1",

"sass-loader": "^13.3.2",

复制代码
npm install sass sass-loader

2.在assets文件夹下新建scss

在scss文件夹下新建文件variable.scss

编写测试内容后保存

css 复制代码
$base-color-default: #409eff;

3.vue.config.js中配置

注意!!!地址一定要写对了,不然读取不到scss文件的内容

javascript 复制代码
const path = require("path");
// 基础路径 注意发布之前要先修改这里
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  transpileDependencies: true,
  // 全局的scss文件配置
  css: {
    sourceMap: false,
    loaderOptions: {
      scss: {
        additionalData(content, loaderContext) {
          const { resourcePath, rootContext } = loaderContext
          const relativePath = path.relative(rootContext, resourcePath)
          if (relativePath.replace(/\\/g, '/') !== 'src/assets/scss/variable.scss') {
            return `@import "~@/assets/scss/variable.scss";${content}`
          }
          return content
        },
      },
    },
  },
}

4.测试

随便在页面上写个样式,如果字体颜色是#409eff,那么就是对的,如果运行报错,请检查vue.config.js中路径是否写错

javascript 复制代码
.div_box{
    color:$base-color-default;
}

文章到此结束,希望对你有所帮助~

相关推荐
前端_学习之路33 分钟前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员