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

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

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

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

 

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

<template lang="pug">
div(style="height:100%;width:100%; ")
    .text 我是红色，因为颜色变量$--main-color为red

</template>
<style scoped lang="scss">
@import "../../style/var.scss";
.text {
    color: $--main-color;
}
</style>

页面效果如下：

 

 

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

 

 

 

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

module.exports = {
    chainWebpack: (config) => {
          const oneOfsMap = config.module.rule("scss").oneOfs.store;
          oneOfsMap.forEach((item) => {
            item
              .use("sass-resources-loader")
              .loader("sass-resources-loader")
              .options({
                // 公用scss
                resources: path.resolve(__dirname, `./src/imom-web/style/var.scss`),
              })
             .end();
          });      }
}