Question

我在 Tailwind 2 中使用 Angular 11。我没有使用自定义 webpack 和 postCSS，但我也尝试过，它给了我同样的错误。

所以问题是当我尝试构建应用程序的 prod 版本时，它给了我以下错误：

Generating browser application bundles (phase: building)...An unhandled exception occurred: styles.add0c6b01f26781b3fec.css D:\Dev\Angular\project\styles.add0c6b01f26781b3fec.css:1344:16: Missed semicolon
See "C:\Users\farka\AppData\Local\Temp\ng-IzKrHt\angular-errors.log" for further details

它只发生在 @import 'tailwindcss/utilities'; 上。如果没有导入实用程序，构建就完成了。

如果我关闭 angular.json 中的缩小，它也会生成。

                    "configurations": {
                      "production": {                            
                        "optimization": {
                            "scripts": true,
                            "styles": {
                                "minify": false,
                                ...
                            }
                        },

显示我的错误日志：

[error] Error: styles.add0c6b01f26781b3fec.css D:\Dev\Angular\project\styles.add0c6b01f26781b3fec.css:1344:16: Missed semicolon
    at D:\Dev\Angular\project\node_modules\@angular-devkit\build-angular\src\webpack\plugins\optimize-css-webpack-plugin.js:98:48
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

如果有人能告诉我如何解决这个问题，那就太棒了。

Answer 1

我想通了。我会写下我如何找到它的过程，也许它会帮助其他陷入类似问题的人。

因此，由于 prod 构建在没有缩小 CSS 的情况下取得了成功，我认为它应该与此相关。我检查了一下，Angular 使用 nanoCSS PostCSS 插件来缩小 CSS。我编译了 prod 构建并使用了 CSS 输出并将其粘贴到 https://cssnano.co/playground 中并尝试缩小它。结果我的 tailwind.config.js 文件中有以下行：

theme: {
    extend: {
        boxShadow: { 'add-to-fav-card-container': 'box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.7)', }

如您所见，我使用自定义主题扩展了默认主题的 boxShadow 属性，并且不小心写入了“box-shadow: 0 0 0 ...”而不是值。这并没有引起我和我的 IDE 的注意。

Angular with Tailwind 无法构建产品

1 个答案: