vue-cli4 项目sass变量自动引入全局

背景:在项目开发中,我们经常会将样式中的值作为一个变量,尤其是需要处理主题切换时候,更是会通过sass的语法定义样式变量。

1. 首先我们定义一个样式变量文件,文件名暂定:var.scss,如下:

// var.scs
$--main-color:red;

 

2. 我们在开发的业务中,需要编写样式时,需要引入【var.scss】文件,然后使用里面的变量:

复制代码
 1 <template lang="pug">
 2 div(style="height:100%;width:100%; ")
 3     .text 我是红色,因为颜色变量$--main-color为red
 4 
 5 </template>
 6 <style scoped lang="scss">
 7 @import "../../style/var.scss";
 8 .text {
 9     color: $--main-color;
10 }
11 </style>
复制代码

页面效果如下:

 

 

 问题:这样太过于麻烦,几乎每个页面都需要引入 var.scss 文件才能去使用颜色变量,这样太过于繁琐了。

 

 

 

解决方法就是在vue.config.js的配置文件中配置以下,则var.scss的变量自动视为全局引入,后续使用中不需要再次引入var.scss文件:

复制代码
 1 module.exports = {
 2     chainWebpack: (config) => {
 3           const oneOfsMap = config.module.rule("scss").oneOfs.store;
 4           oneOfsMap.forEach((item) => {
 5             item
 6               .use("sass-resources-loader")
 7               .loader("sass-resources-loader")
 8               .options({
 9                 // 公用scss
10                 resources: path.resolve(__dirname, `./src/imom-web/style/var.scss`),
11               })
12              .end();
13           });      }
16 }
复制代码

 

 

 

 

posted @   蛙仔  阅读(359)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示