PostCSS css-next - 无需使用@import 的全局变量答案

【问题标题】：PostCSS css-next - global variables without having to use @importPostCSS css-next - 无需使用@import 的全局变量
【发布时间】：2017-07-01 13:27:41
【问题描述】：

我有一个 variables.css 文件，其中 :root{} 中包含 CSS 变量

现在每次我需要在我使用的另一个 .css 文件中使用它时：

@import './path/to/variables.css'.

我想知道是否有办法让variables.css 在全球范围内可用，而无需每次需要时都导入它。

我尝试在 cssnext 插件上使用选项 customProperties，但它在将 css 编译为 js 对象时出错...
我使用 React 和 webpack 1 作为 postcss 插件，我有 import、mixins、cssnext 和 nested。

谢谢

【问题讨论】：

标签： webpack postcss cssnext postcss-import

【解决方案1】：

据我了解，没有，但您可以让您的生活更轻松。在您的导入配置中，设置路径，例如：

cssImport({ path: './src' })

假设您的 variables.css 在 src/variables.css 中，您可以这样做：

@import 'variables';

而不是点走回树上找到正确的位置。

【讨论】：

不，这无济于事，因为我有来自 ./src 以外的其他路径的@import。还是谢谢
好吧，不用担心。是的，我全面使用绝对，这可能会使事情变得更容易，但不适用于您的情况

【解决方案2】：

您将 variable.css 导入 main.css（您的全局 css 文件）

//main.css
@import "./variable.css";

然后在 _app.js 中导入 main.css：

// Your path to main.css
import "../assets/main.css"

【讨论】：