css模块＆amp; react + webpack中的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);
}