如何设置 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 的全局变量

通过webpackcss 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

posted @ 2019-03-11 15:16 廖飞银 阅读(...) 评论(...) 编辑 收藏