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

Question

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

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

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

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

我尝试customProperties在cssnext插件上使用该选项，但将 css 编译为 js 对象时出错...
我正在使用Reactwithwebpack 1和 as postcss 插件，我有import、和.mixinscssnextnested

谢谢

Answer 1

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

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

假设你variables.css在src/variables.css，你可以简单地做：

@import 'variables';

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

Answer 2

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

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

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

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