Могу ли я редактировать CSS-файлы моего углового проекта прямо из Chrome DevTools?

Question

Каков наиболее эффективный способ стилизации компонентов в инструментах разработчика браузера с инкапсуляцией представления по умолчанию (эмулированной)?

Мой текущий рабочий процесс включает в себя много утомительного копирования и вставки из инструментов разработчика, таких как:

Chrome dev tools имеет возможность сохранять изменения стиля, сделанные в DOM, в исходный файл css ( Сохранить изменения на диск с рабочими областями ), но я не знаю, будет ли это работать так Angular и Webpack используют стили эмулируемых компонентов.

Должен быть более быстрый рабочий процесс, чем то, что я сейчас делаю. Любые советы?

Answer 1

Вы можете напрямую редактировать файлы проекта CSS из Chrome Devtools. Выполните следующие действия:

1. В angular.json добавить «extractCss»: true так:

Таким образом, вы увидите проверяемые файлы CSS вместо внутренних тегов стиля в заголовке. (вы можете увидеть пример изображения в шаге 3 ниже).

2. Откройте chrome devtools, вкладку Sources, левую вкладку Filesystem и добавьте папку вашего проекта:

Это магический трюк, он позволит вам редактировать ваши локальные файлы из devtools!

3. теперь, когда вы проверяете свой html на css, вы можете щелкнуть файл css, и вы будете перенаправлены на локальный файл:

4. Отредактируйте ваши изменения в файле.

5. Сохраните файл.

Magic! Ваш локальный файл был изменен!

Я ЛЮБЛЮ Chrome!

Приветствия

Answer 2

... Я не знаю, будет ли это работать с тем, как Angular и Webpack используют стили эмулированных компонентов.

TL; DR: Вы можетеделайте это совсем не так, как вы хотели бы.

Угловые области видимости стилей для компонентов и, таким образом, нотация .some-class-name[ngcontent-c5] в инспекторе Chrome.Таким образом, инструменты разработчика не могут точно знать, где можно отследить изменение, которое вы сделали, кроме файла, созданного с помощью карты источника.

Как вы упомянули в своем вопросе, вы можете загрузитьспроектируйте рабочий каталог в инструменты разработчика ( статья, которую вы опубликовали ) и отредактируйте сам файл .При сохранении угловой наблюдатель зарегистрирует изменение и перезагрузит.Это будет работать с чистым css / js, а также с прекомпилятором scss, ts и т. Д.

Итак, чтобы ответить на вопрос: да, веб-пакет все равно перекомпилируетсякогда вы делаете это , но не совсем так, как вы ищете.