Angular v12 的生产版本中的样式未正确呈现

Question

我按照Angular Upgrade guide 将 Angular v11 项目升级到 Angular v12。 该项目使用 Angular Material 和 Bootstrap 库。当我使用--configuration production 标志进行构建时，样式正在破坏

我发现这是 Angular 的一个普遍问题

• Angular 12 post-upgrade styling issue
• https://github.com/angular/angular-cli/issues/8758

1. 我尝试使用--extract-css false 标志。在这种情况下，我意识到 styles.scss 的样式没有得到应用
2. 我还尝试使用https://sass-lang.com/documentation/cli/migrator#installation 迁移styles.scss。但没用

Angular v11 样式.css

Angular v12 样式.80d2e538149d4fe8acb1.css

angular.json中使用的配置如下

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ]

正如观察到的，Angular v12 构建中缺少第 3 方样式。有人可以分享他们如何解决的细节吗？提前致谢

Answer 1

这是来自 angular.json 中的 V12 应用程序（从 V8 一路升级?）的摘录：

"projects": {
        "some-app": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "stylePreprocessorOptions": {
                            "includePaths": ["src/"]
                        },
                        "styles": ["src/style/styles.scss"],

也许您的项目遗漏了上述与样式相关的一些设置？我正在处理的项目与生产（或任何其他）构建相关的样式没有问题。祝你好运。我也隐约记得这个问题，但不记得确切的解决方案。这就是为什么我发布了上面的摘录，希望这可以为您的问题提供线索。如果我脑海中突然出现关于“我会回来”的想法（摘自 A. Schwarzenegger ?）