如何在 CSS-Modules 中使用全局变量？答案

【问题标题】：How to use global variables in CSS-Modules?如何在 CSS-Modules 中使用全局变量？
【发布时间】：2017-04-08 08:34:45
【问题描述】：

我正忙着用 CSS-Modules 学习 React，但我不太明白如何存储变量？例如，在 Sass 中你可以这样做：

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

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

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

【问题讨论】：

标签： reactjs webpack css-modules

【解决方案1】：

看看这个

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


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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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]
                    }
                }
            ]
        }

【讨论】：

localIdentName 现在已移入模块。你可能想做：modules: {auto: true, localIdentName: "[name]_[local]_[hash:base64:5]",}

【解决方案4】：

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

// 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 模块一起使用。

【讨论】：

虽然组合是一种选择，但我建议遵循 Icharbon 的回答。使用 postcss，您可以获得实际的变量支持，并有助于保持代码 DRY'er。 CSS 模块和 Sass 可以一起使用，所以我更喜欢 Sass 变量而不是提到的 @Value 语法。
组合！== 变量。
虽然这适用于本示例，但此答案不是“如何将全局值与 css 模块一起使用”问题的答案，哈哈。例如，如果我想将此颜色用作背景颜色和颜色怎么办？