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

}