Vue & React 中怎么使用 sass 全局变量

在开发过程中你有没有遇到一种情况，项目中很多地方用到类似的样式，此时会急切的想要知道 css 怎么像 js 一样定义变量。

可以新建一个保存变量的文件，将未来使用到的变量都存在这里，在需要的 scss 文件中引入即可

1. 定义变量

$color-black: #000;

2. 引入变量文件

@import '@assets/style/variable.scss';
.wrap {
    color: $color-black;
}

问题又来了，如果在很多地方都用到了怎么办？一个一个文件引入着实有点麻烦。
下面就简单介绍一下在 Vue 以及 React开发小程序时如何使用全局变量吧~

Vue

1. 我们可以在 vue.config.js 文件中添加如下代码，使用 loader 将文件中的变量全局性引入

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@assets/style/variable.scss";`
            }
        }
    }
}

2. 这样就可以在任意 scss 文件中直接使用变量，无需在每个文件中都引入一次变量文件

.wrap {
    color: $color-black;
}

React

开发小程序时，使用到了 React.js，同样可以做一些配置信息，以达到全局共享变量。

1. 在 config/index.js 文件中引入 path并解析路径

// 引入 path
import path from 'path'

module.exports = {
    sass: {
        // 全局注入scss文件
        resource: [
            'src/assets/styles/variable.scss',
        ],
        projectDirectory: path.resolve(__dirname, '..'),
    },
}

2. 在指定路径新建 scss 变量文件，就可以直接在全局使用变量了

.wrap {
    color: $color-black;
}

---

未来设计师需要全局更换变量颜色，就可以很方便的在变量文件中统一替换，大大减少了全局搜索的工作量。

如果有写的不对不好的地方，欢迎大佬们批评指正啦~