Angular --prod build 从编译的 CSS 中去除 SVG 属性

Question

这是有问题的 SCSS 的一个示例：

ellipse.stand {
  fill: $light-blue;
  test: 1;
  rx: 8;
  ry: 3;

  @if $home {
    transform: translate(0, 25vh) rotate(-5deg);
  }
}

使用开发版本，这是生成的 CSS：

.page.home>.bg>div.dark svg g.doodle.monitor ellipse.stand {
  fill: #a3c4cb;
  test: 1;
  rx: 8;
  ry: 3;
  -webkit-transform: translate(0,25vh) rotate(-5deg);
  transform: translate(0,25vh) rotate(-5deg);
}

但是使用 ng build --prod，这是生成的 CSS：

.page.home>.bg>div.dark svg g.doodle.monitor ellipse.stand {
  fill: #a3c4cb;
  test: 1;
  -webkit-transform: translate(0,25vh) rotate(-5deg);
  transform: translate(0,25vh) rotate(-5deg);
}

如您所见，我在此示例中故意添加了一个无效样式 (test: 1) 以测试这是否与未知属性有关，但这似乎是特定于 SVG 几何属性的。

这是我的 Angular 构建配置的样子：

{
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/www",
    "index": "src/index.html",
    "main": "src/main.ts",
    "resourcesOutputPath": "resources",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": [
      "src/.htaccess",
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles/global.scss",
      "node_modules/primeng/resources/primeng.min.css",
      "node_modules/primeicons/primeicons.css"
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles"
      ]
    },
    "scripts": []
  },
  "configurations": {
    "production": {
      "fileReplacements": [{
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": false,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [{
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      }]
    }
  }
}

---

我发现的与此问题唯一相关的现有问题是：Angular-cli ng build --prod is stripping a unknown CSS property from my CSS, how can i force ignore

我已尝试按照 cmets 中的建议更改 extractCss 设置，但没有效果，而且与上述问题不同，我没有收到编译器关于无效属性名称的任何警告。

我已经被这个难住了好几天了。任何人都知道如何防止 Angular 破坏我的 SVG 样式？

Answer 1

这与 Angular.json 中的 buildOptimizer 相关，尝试通过调整 false 并重新编译 prod 中的代码。

buildOptimizer = false;