期望输入结束，“ADD”、“SUB”、“MUL”、“DIV”，得到意外的“RPAREN”答案

【问题标题】：Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"期望输入结束，“ADD”、“SUB”、“MUL”、“DIV”，得到意外的“RPAREN”
【发布时间】：2020-05-22 21:53:49
【问题描述】：

我在我的 Gatsby 项目中使用 Augmented UI，在开发模式下一切都很好。

当我使用构建命令时，我得到了这个日志错误：

info bootstrap finished - 4.630 s
⠀
failed Building production JavaScript and CSS bundles - 9.761s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Parse error on line 1:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

not finished run queries - 9.857s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@1.0.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the project@1.0.0 build script.

经过一些研究，PostCSS 似乎无法与 Augmented UI 一起工作（在 calc 函数上）。

我无法找到禁用 PostCSS 的方法。

我的依赖版本是：

"gatsby": "^2.18.5",
"gatsby-plugin-postcss": "^2.1.16"

我现在的postcss.config.js 是这样的：

module.exports = () => ({
  plugins: [require('tailwindcss')],
})

感谢您对此问题的任何帮助。

【问题讨论】：

标签： javascript css webpack gatsby postcss

【解决方案1】：

我遇到了同样的问题（Argument UI 也是如此），但没有解决。但这里有一个快速解决方法：

<Helmet>
  <link rel='stylesheet' href='https://unpkg.com/augmented-ui/augmented.css' />
</Helmet>

请注意：我必须删除我的 public 和 .cache 文件夹才能使构建包含指向 CDN 的链接。

【讨论】：

【解决方案2】：

@Zooly，问题与 CSS 预处理器或压缩器中使用 calc 函数有关。来自 Augmented UI 的文档：

与 Create React App 的兼容性（在我的情况下是 Vue） Create React App 依赖于 PostCSS 和 cssnano。这两个库都有解析错误会阻止增强 ui，因此您需要将增强 ui.min.css 复制到公用文件夹中并手动将其包含在 index.html 文件中以避免它们，直到它们被修复。 https://augmented-ui.com/docs/#install

您可以在 GitHub https://github.com/propjockey/augmented-ui/issues/3#issuecomment-579671714 上的此支持答案中看到，您可以将此密钥添加到您的 package.json 配置文件中：

"cssnano": {
    "preset": [
      "default",
      {
        "calc": false
      }
    ]
  },

我使用这个解决方法，它可以很好地构建我的 Vue 项目。希望它也适用于你。

【讨论】：

有效，谢谢解答！