Angular with Tailwind无法构建产品

Question

我正在使用Angular 11和Tailwind 2。我没有使用自定义的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的注意。