Question

我使用http://cssnext.io设置了postcss解析器，并试图找到一种方法来设置variables.css文件以包含我的所有主题设置。

到目前为止variable.css看起来像是有几个vars

:root {
  --color-white: #FFF;
  --color-black: #000;
}

我将其导入到我想要使用这些变量的其他文件中，所以@import './variables.css'或类似，然后在该文件中使用它，例如background-color: var(--color-white)，但是我得到了以下警告：< / p>

变量' - color-white'未定义，无需后备即可使用 [postcss-定制性质]

Answer 1

您可以尝试安装postcss import

$ npm install postcss-import

检查此post以获取有关如何安装的详细信息。

修改使用postcss-import解决了这个问题，但目前最新版本存在问题，使用v 7.x进行稳定性

Answer 2

如果要与JavaScript代码共享变量，另一种解决方案是依赖postcss-custom-properties“变量”选项。

以下是传递全局变量的postcss-cssnext配置的示例

<input id="testInput" type="text" value="" />