如何设置 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