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

Posted 2023-03-06

【中文标题】PostCSS css-next - 无需使用@import 的全局变量

【英文标题】：PostCSS css-next - global variables without having to use @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。

谢谢

【参考方案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"