使用CSS Next全局变量

Question

我已经设置了具有http://cssnext.github.io的postcss解析器，并正在尝试找出一种方法来设置一个variables.css文件来包含所有主题设置。

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

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

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

变量 '--color-white' 未定义并且没有回退值被使用 [postcss-custom-properties]

- Ilja

Answer 1

您可以尝试安装postcss import

$ npm install postcss-import

查看此帖子了解更多安装详细信息。

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

- Edison Biba

Answer 2

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

以下是一个postcss-cssnext配置示例，用于传递全局变量：

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

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

- MoOx