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:DevAngularprojectstyles.add0c6b01f26781b3fec.css:1344:16: Missed semicolon
See "C:UsersfarkaAppDataLocalTempng-IzKrHtangular-errors.log" for further details

它只发生在@import 'tailwindcss/utilities';中。如果不导入实用程序，则构建完成。

如果我关闭angular.json中的缩小功能，它也会构建。

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

错误日志显示：

[error] Error: styles.add0c6b01f26781b3fec.css D:DevAngularprojectstyles.add0c6b01f26781b3fec.css:1344:16: Missed semicolon
at D:DevAngularprojectnode_modules@angular-devkitbuild-angularsrcwebpackpluginsoptimize-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。我编译了产品构建，使用了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-show:0 0 0…"而不仅仅是值。这并没有引起我和IDE的注意。