reactjs - react + webpack中的css模块和cssnext自定义属性

Question

我只是想知道使用这些 cssnext 自定义属性以及反应中的 css 模块的最佳方法是什么。

有没有办法跨模块共享这些？

: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;
}

Answer 1

CSS 模块应该只处理类名（以点开头）的选择器。所以这应该不是问题，您应该能够在文件中立即使用这些自定义定义。您可以使用postcss-import内联包含全局定义的文件。

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

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

Answer 2

因为 postcss-loader 一次只转换一个文件，所以您必须导入您的自定义属性，例如

@import './root.css';

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