如何在SCSS中使用JavaScript变量作为全局变量？

本文共计393个文字，预计阅读时间需要2分钟。

2019年更新：发现了一种更优的方法，预处理器加载全局设置文件。官方GitHub提供了详细的配置说明。在SCSS中使用变量非常方便，创建一个`variables.scss`文件。

2019年3月6日更新：发现一种更好的方法，预处理器加载全局设置文件。官方GitHub提供了详细的配置说明。

Update201936：发现一个更好的方法，预处理器加载一个全局设置文件官方github给出了详细的配置。在SCSS中使用变量很方便，创建一个variables.scss文件

Update2019/3/6：发现一个更好的方法，预处理器加载一个全局设置文件

官方github给出了详细的配置。

---

在 SCSS 中使用变量很方便，创建一个 variables.scss 文件，里面声明各种变量，如果你需要使用这些变量，就使用@import variables.scss导入这个文件即可。但这样会存在两个小问题：

• 每次使用都要导入，不优雅
• Javascript 文件无法使用这些变量

有没有两全其美并足够简单的方法呢？（：废话

假设有这样一个保存 scss 变量的文件，style/scss/variables.js:

module.exports = { 'red-color': 'red', 'px': `${1/20}rem`}

仅需要在 webpack.config.js 中更改下配置：

let styleVariables = require('/style/scss/variables')// 其他配置...{ test: /\.scss$/, use: [ 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: { data: Object.keys(styleVariables) .map(k => `\$${k}: ${styleVariables[k]};`) .join('\n') } } ]},

那么在任意 scss 中，都可以直接使用我们在 Javascript 文件中声明的变量，而无需额外引入： // page-a.scss

.page-a { height: 20*$px; color: $red-color;}