Question

我忙着学习与CSS模块的反应，我不太明白如何存储变量？例如，在Sass中你可以做到这一点：

// _variables.scss
$primary-color: #f1f1f1; 

// heading.scss
@import './variables';
.heading {
  color: $primary-color
}

如何在CSS模块中实现这一目标？

Answer 1

CSS-Modules文档在这里提到变量： https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

有了这个，您可以导入变量：

@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;

可以在你的css中使用：

.main {
    background-color: tertiary;
    border-top: 30px solid primary;
}

要使此工作postcss-loader和postcss-modules-values需要添加到您的webpack配置中。见下文：

        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[name]_[local]_[hash:base64:5]'
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [postcssModulesValues]
                    }
                }
            ]
        }

Answer 2

一种方法是使用依赖项。例如，

// variables.css
.primaryColor {
  color: #f1f1f1
}

// heading.css
.heading {
  composes: primaryColor from "./variables.css"
}

在此处查看更多详细信息：https://github.com/css-modules/css-modules#dependencies

如果您使用的是webpack，可以在此处找到更多示例：https://github.com/webpack/css-loader#composing-css-classes

此外，如果您使用的是webpack，您仍然可以将Sass与CSS模块一起使用。

Answer 3

您可以使用 sass预处理器和。

sass-resources-loader会将所有变量，mixins等添加到每个必需的sass文件中。

Answer 4

检查一下

//vars.css
:root {
  --color-black: #222;
}


//myComponent.module.css
@import './vars.css';

.component{
  color: var(--color-black);
}

如何在CSS模块中使用全局变量？

4 个答案: