Как включить CSS исходные карты для приложения Angular 6?

Question

Как включить исходные карты для файлов CSS в моем приложении Angular 6?

Я определяю свой исходный код стилей в файлах SCSS, которые впоследствии компилируются в CSS с помощью Angular CLI. Тем не менее, я не вижу исходный код в браузере во время отладки стилей. Все стили указывают на блоки <style>...</style>.

Я хочу видеть ссылки на оригинальные файлы SCSS при отладке скомпилированного кода.

Какие параметры мне нужно установить в angular.json файле?

---

Я пытался использовать --source-map аргумент CLI для команды ng serve, но похоже, что он ни на что не влияет. Файлы исходных карт генерируются в обоих случаях согласно журналу компиляции веб-пакета.

Answer 1

С https://github.com/angular/angular-cli/issues/9099#issuecomment-388710635

1) измените angular.json, добавив --extract-css, в 6.0 этот аргумент удален из ng serve

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
       ---
      },
      "configurations": {
        "production": {
          ---
        },
        "serve": {
          "extractCss": true,
           ---
        }
      }
    },

2) Затем измените serve-> options-> browserTarget-> project-name: сборка на имя проекта: build: serve

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "open": true,
        "browserTarget": "<project-name>:build:serve"
      },
      "configurations": {
        "production": {
          ---
        }
      }
    }

3) запустить ng serve --source-map