时间戳

首页 > 解决方案 > 使用 Tailwind 的 Angular 无法构建产品

angular - 使用 Tailwind 的 Angular 无法构建产品

问题描述

我正在使用带有 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)

如果有人能给我一些关于如何解决这个问题的想法，那就太棒了。

标签： angulartailwind-css

解决方案

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

因此，由于 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 的注意。

推荐阅读