> css教程 > css >

设置sass全局变量,js如何使用sass变量的办法

来源:网络 文章列表 2019-08-20 8
如何在样式中使用 scss 的声明的全局变量,如何在 js 中使用 sass 的全局变量,假设我们有一个全局的 scss 变量文件/styles/_vars.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)
版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接