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

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

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

2
Casey Rule 5 Мар 2019 в 00:08

1 ответ

Лучший ответ

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

buildOptimizer = false; 
1
Abel Valdez 10 Мар 2019 в 18:19