React和Webpack中的CSS模块和CSSnext自定义属性

Question

我想知道在React中使用cssnext自定义属性的最佳方法是什么，同时还要使用css modules。

是否有一种方法可以在不同模块之间共享这些属性？

:root{
  --primary: pink;
  --fontSize: 1rem;
  --fullWidth: 100%;
  --color: red;
  --gutter: 1.618rem;
}
@custom-media --small-viewport (max-width: 30em);
@custom-media --large-viewport (min-width: 75em);
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

编辑：***好的，我尝试过这个方法，以为它起作用了，但实际上没有。

:global(:root) {
  --primary: pink;
  --fontSize: 1rem;
  --fullWidth: 100%;
  --color: pink;
  --gutter: 1.618rem;
}

- user3224271

---

看起来你应该可以在其他的CSS文件中使用@include来引入它们。难道你不能这样做吗？你尝试过什么？ - Hawken MacKay Rives

Answer 1

由于postcss-loader一次只能转换一个文件，因此您必须导入自定义属性，例如：

@import './root.css';

.foo {
    color: var(--primary);
}

- Richard Scarrott

Answer 2

CSS模块应该只处理以点号开头的类名选择器。因此，这不应该是一个问题，只要它们在文件中就可以使用这些自定义定义。您可以使用postcss-import来内联包含全局定义的文件。

另一种解决方案是使用postcss插件选项定义这些全局值：

• https://github.com/postcss/postcss-custom-properties#variables
• https://github.com/postcss/postcss-custom-media#extensions

- MoOx

---

+1 对于 MoOx 的建议，使用 postcss-custom-properties 是一个不错的选择。另一种方法是使用 postcss-advanced-variables - 你可以在一个 JavaScript 文件中定义全局变量，而无需导入它们。你需要像 webpack 这样的工具来定义你的 JavaScript 文件的路径，请参考此链接。 - user6144056