Angular --prod build удаляет свойства SVG из скомпилированного CSS

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.

Вот так выглядит моя угловая конфигурация сборки:

{
  "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 извлекает неизвестное свойство CSS из моего CSS, как я могу принудительно игнорировать

Я пытался изменить настройку extractCss, как предложено в комментариях, но этоне дал никакого эффекта, и, в отличие от приведенного выше вопроса, я не получаю никаких предупреждений от компилятора о недопустимых именах свойств.

Я был озадачен этим уже несколько дней.Кто-нибудь знает, как я могу удержать Angular от стилевого оформления SVG?

Answer 1

Это что-то связанное с buildOptimizer в Angular.json попыткой путем обнуления false и перекомпиляции кода в prod.

buildOptimizer = false;