Почему стили отображаются на элементе inspect в Angular 2

Я загрузил бесплатную тему HTML с именем dashgum из интернета. Я реализую его для приложения Angular2, используя угловой-cli. Я преобразовал файлы css в .scss и вставил код в угловое приложение. Затем я импортировал файлы в файл глобальных стилей с именем стили.scss чтобы применить стили к приложению, как это:

@import url('./scss/bootstrap.scss');
@import url('./scss/font-awesome/css/font-awesome.scss');
@import url('./scss/zabuto_calender.scss');
@import url('./scss/gritter/css/jquery.gritter.scss');
@import url('./scss/lineicons/style.scss');
@import url('./scss/style.scss');
@import url('./scss/style-responsive.scss');

проблема, с которой я сталкиваюсь во время отладки, заключается в том, что все стили отображаются как встроенные стили в браузере, как это (обратите внимание на тег стиль):

enter image description here

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

enter image description here

Это настройки по умолчанию в Angular 2, поскольку я не внес никаких видимых изменений в стили, которые будут отображаться при проверке. Есть ли известный способ изменить настройки в Angular 2 для стилей, которые будут отображаться как внешние стили при проверке? Встроенные стили затрудняют отладку. Любая помощь, указывающая на решение, будет оценена по достоинству.

10
angular css scss-lint

2 ответов

мой первый совет (как официальная угловая документация CLI говорит), чтобы поместить вашу глобальную библиотеку внутри .angular-cli.json такой:

  ...
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.scss"
  ],
  ...

затем просто запустите приложение с помощью --extract-css параметр, чтобы увидеть в инспекторе браузера исходные файлы:

ng serve --extract-css

и у вас будет этот:

Inspector element result

4

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

Edit:

см. ответ тойоски выше.

2