全局使用 css 下一个变量

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)，但是我收到以下警告:

variable '--color-white' is undefined and used without a fallback [postcss-custom-properties]

Answer 1

你可以试试安装postcss import

$ npm install postcss-import

查看此 post 以了解更多有关如何安装的详细信息。

编辑使用 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

全局使用 css 下一个变量

Using css next variables globaly

css

postcss

cssnext