如何在 SCSS 使用 JavaScript 变量/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;
}