如何设置 sass 全局变量，js如何使用 sass 变量

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

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

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

$red: red;
$blue: blue;

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

<style lang="scss" scoped>

@import '/styles/_var.scss';

.login {
  background-color: $red;
}
</style>

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

我们迫切需要一种全新的更优雅的方法——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配置webpack，这样我们就能在 js 中使用 sass 变量了。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

现在，我们在 sass 文件中定义变量并将其导出为 js，CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。

// /styles/global.scss

$exportedValue: #ccc;

:export {
  exportedKey: $exportedValue;
	/* ... */
}

现在，我们可以在 js 中使用这个变量啦。

// js/test.js

import styles from '/styles/global.scss'
console.log(styles)

参考

css-modules

sass-resources-loader

how-to-share-variables-between-js-and-sass