Как исходная карта Angular CLI файлы css в инструментах Chrome Dev?

Есть ли способ для стилей исходной карты, чтобы изменения, сделанные в Chrome Dev Tools, сохранялись в добавленной локальной рабочей области?

Chrome Dev Tools показывает все мои стили в styles.scss в теге <style>...</style> в инспекторе элементов.

Я установил рабочие области Chrome Dev Tools, похожие на то, как @vt5491 сделал это в их SO здесь: qaru.site/info/359174/... и работает для файлов .ts Я считаю, что стили элементов не привязываются к исходным картам в контроле элемента, поскольку они были созданы с помощью ng-сервиса в элемент index.html <style>. Кажется, что.

• Я запускаю ng serve -dev -p=8081
• и попробовал ng serve -dev -p=8081 --aot=true, но получил ENONET ng.factory.js missing error
• Я попытался поставить стили в app.component.css по сравнению с styles.scss
• Я пробовал это с помощью ng build, но он также ставит все стили в index.html <style>

Это так, как в настоящее время с CLI Angular? Может быть, подстроить веб-пакет под ним? Кажется, что добавлено теги <style> на скомпилированную таблицу стилей. Если это так, как CLI работает в настоящее время, возможно, это не просто вопрос, но и запрос функции, потому что мы делаем работу с интерфейсом прямо, так что эта работа сэкономит время.

Связано с:

• Как сохранить изменения стиля CSS в форматах Angular 2.0 в инструментах разработчика Chrome?
• Angular -cli не генерирует файлы typescript с опцией -dev
• Как отладить Angular 2 приложение, используя angular -cli webpack? (в WebStorm)
• SCSS SourceMap, указывающий только на Селектор родителя.
  • github.com/ angular/angular-cli Issue # 2826

Спасибо за любые советы.

Ответы

Ответ 1

Angular -cli использует webpack, но он имеет свои собственные файлы конфигурации в / node_modules/angular -cli/models.

Вы можете изменить их, но если вы обновите angular -cli, он перезапишет ваши файлы. Поэтому обязательно создавайте резервные копии.

Да, он предназначен для ввода встроенных тегов <style>. Я согласен с тем, что это кажется странным и должно быть в отдельном файле, главным образом потому, что он может быть кэширован пользователем и уменьшен размер вашего фрагмента. Возможно, они думают, что встроенная функция хороша, так как, когда вы находитесь в режиме разработки, вы не хотите, чтобы она была кеширована, что хорошо, но в 'ng build' она должна быть скомпилирована в собственный файл.

Я знаю, что вы можете настроить webpack для этого, используя "extract-text-webpack-plugin", но я не слишком хорошо знаком с ним.

Я хотел бы увидеть angular -cli сделать это при сборке или иметь опцию в конфигурации для этого.

Ответ 2

Когда вы вводите ng serve по умолчанию angular cli не включает файлы исходных файлов для файлов css, но вы можете включить их, введя эту команду

ng serve -sm -ec

или

ng serve --sourcemap --extractCss

Я использую angular Cli -v 1.0.3 и дополнительную информацию - Angular специальные случаи CLI