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 is stripping a unknown CSS property from my CSS, how can i force ignore

我已经尝试按照注释中的建议更改extractCss设置，但没有任何效果，并且与上面的问题不同，我没有从编译器收到有关无效属性名称的任何警告。 / p>

这几天让我很困扰。有谁知道我该如何防止Angular破坏我的SVG样式？

Answer 1

这与 Angular.json 中的buildOptimizer有关，请尝试将false伪装并重新编译prod中的代码。

buildOptimizer = false;

Angular --prod构建从已编译的CSS中剥离SVG属性

1 个答案: