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

Question

我想知道在react中使用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);
}