js控制scss的变量_如何设置 sass 全局变量，js如何使用 sass 变量

关键词：sass全局变量 js引用sass变量

1 如何在样式中使用 scss 的声明的全局变量

假设我们有一个全局的 scss 变量文件/styles/_vars.sass，如下：

$red: red;

$blue: blue;

如果想要在组件的样式中使用这些变量，我们需要引入这个文件，像这样：

@import '/styles/_var.scss';

.login {

background-color: $red;

}

这种方式虽然解决了问题，但带来了很多问题：代码冗余、不好维护...

我们迫切需要一种全新的更优雅的方法——sass-resources-loader

该加载器将 sass 资源自动导入每个所需的 sass 模块。 因此，您可以在所有 sass 样式中使用共享变量和mixin，而无需在每个文件中手动导入它们。

注意，此loader不限于sass，并适用于 less，post-css等。

Supports Webpack 4.

官方github上对于不同的配置都给出详细的说明，请参考sass-resources-loader

2 如何在 js 中使用 sass 的全局变量

通过webpack和css module，我们可以轻松的在 js 中使用 sass 文件中定义的全局变量。

第一步，安装需要的依赖：

npm install sass-loader node-sass webpack --save-dev

第二步使用sass-loader配置webpac