在具有多个默认值的 CSS 变量的 calc() 上发布 CSS 解析错误

编程问答 2022-05-22

问题描述

我正在使用 Post CSS 运行 Nuxt.JS 项目，并在生成项目的静态版本时收到以下错误：

JisonParserError: Parse error on line 1:
calc(100% / 12) * var(--cols-md,var(--cols-sm,var(--cols,(12))))
-----------------------------------------------------------------^

失败的 CSS 片段——但根据 W3C CSS Validator 是正确的标记——看起来像这样：

@media (min-width: 1024px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-md,12))));
  }
}

奇怪的是，在添加了第三个回退之后，它开始失败。因为这个位于文档更上方的代码段被正确解析。

@media (min-width: 768px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-sm,12)));
  }
}

有什么帮助吗？谢谢！

解决方法

找到答案：这似乎是一个错误：https://github.com/postcss/postcss-calc/issues/104 有人还发布了一个解决方法：将一大块变量临时保存到另一个变量中以将其用作中介。 >

css-variablesnuxt.jspostcsspostcss-loader