javascript - 期望输入结束， "ADD"， "SUB"， "MUL"， "DIV"，得到意外的 "RPAREN"

Question

我与 Augmented UI 一起工作在我的 Gatsby 元素中，一切都在开发模式下运行良好。

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

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(在计算函数上)一起工作。

我找不到禁用 PostCSS 的方法。

我的依赖版本是:

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

我当前的 postcss.config.js 看起来像这样:

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

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

Answer 1

@Zooly，问题与在 CSS 预处理器或缩小器中使用 calc 函数有关。来自增强 UI 的文档:

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

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

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

我使用了这个解决方法，它可以很好地构建我的 Vue 元素。希望它也适用于您。