css - 全局使用 css next 变量

Question

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

到目前为止variable.css看起来像这样，有几个 var

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

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

变量 '--color-white' 未定义并且没有后备使用 [postcss-custom-properties]

Answer 1

您可以尝试安装 postcss 导入

$ npm install postcss-import

检查此帖子以获取更多详细信息如何安装。

编辑 使用postcss-import解决了这个问题，但是目前最新版本存在问题，请使用 v 7.x 以确保稳定性

Answer 2

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

这是一个用于传递全局变量的 postcss-cssnext 配置示例

require("postcss-cssnext")({
  features: {
    customProperties: {
      variables: {
        mainColor: "red",
        altColor: "blue",
      }
    }
  }
})

https://cssnext.github.io/usage/#features