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

Question

我正在忙于学习使用CSS模块的React，但我不太明白如何存储变量？例如，在Sass中，您可以这样做：

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

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

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

- user818700

Answer 1

这是使用原始CSS模块的方法

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


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

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

- Mantas

Answer 2

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

- lcharbon

---

localIdentName has now moved inside modules. You may wanna do: modules: {auto: true, localIdentName: "[name]_[local]_[hash:base64:5]",} - KJ Sudarshan

有没有想过如何在CSS calc()中使用@value？例如，这会抛出错误： "@value margin: 10px;.someclass{ width: calc(100% - margin); }" - marcel_pi

Answer 3

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

// 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模块。

- franky

---

虽然组合是一种选择，但我建议遵循Icharbon的答案。使用postcss，您可以获得实际的变量支持，并有助于保持代码DRY。CSS模块和Sass可以一起使用，因此我更喜欢Sass变量而不是提到的@Value语法。 - Andrew

组合 !== 变量 - jjalonso

虽然这对于这个例子可以工作，但是这个答案并不是问题“如何在CSS模块中使用全局值”的答案。例如，如果我想要将此颜色用作背景颜色以及颜色，该怎么办？ - Jay

Answer 4

如果您在 index.css 中添加根 CSS 变量，则可以全局访问这些变量，而无需使用 @import

这是基于默认文件结构的假设，即在 src/App.js 文件中导入了 index.css。

CSS 模块是作用域限定的，这意味着其中的变量是局部的，但这并不意味着您不能从全局 CSS 文件中访问变量。

示例一

假设这是我们的 index.css

:root {
  --header-width: 95vw;
  --border-radius-one: 5px;
}
body {
  background-color: #261d54;
  margin: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我们可以像这样访问根CSS变量：

#header {
  margin: 0 auto;
  width: var(--header-width);
  border:1px solid blue;
  border-radius: var(--border-radius-one);
}

现在，如果您想从脚本中修改这些变量，以便使它们变得更加动态化，您可以使用setProperty() JS方法来设置CSS属性的新值。

因此，在React中实现这一点的方式是创建一个函数来更改属性，并在JSX中实现onClick。 示例二

function changeFontSize(size){
   document.documentElement.setProperty('--font-size', size)
}

return(
  <div>
    <button onClick={() => changeFontSize('18px')}>
      set font size to 18px
    </button>
    <button onClick={() => changeFontSize('12px')}>
      set font size to 12px
    </button>
  </div>
)

如果你想了解关于documentElement的内容，请点击这里。

- Gass

Answer 5

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

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

- Arseniy-II