如何在 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;
}