Ответ 1
Редактирование в реальном времени SASS/SCSS больше не работает, так как оно было отменено командой Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=863408#c5
Раньше у нас был эксперимент "LiveSASS", который распространял изменения обратно в SASS/sourcemapped CSS. Эксперимент был в конечном итоге объявлен устаревшим и удален из-за отсутствия четкого пути вперед.
ОБНОВЛЕНИЕ: однако исходные карты по-прежнему работают нормально, и учитывая, что:
- Ваши CSS файлы сопоставлены с файлами SASS
- Вы добавили папку с помощью css/sass в рабочую область (т.е. Devtools может получить к ним доступ в файловой системе)
- вы обслуживаете свой веб-сайт (или, по крайней мере, файлы
.css) с локального хоста
вы получите .scss файлы, представленные на вкладке Devtools 'Styles.
Для редактирования: просто дважды щелкните имя файла .scss, и оно будет доступно на вкладке Источники для редактирования и сохранения. Не так просто, как прямое редактирование на вкладке "Стили", но все же весьма полезно. Я делаю почти все свои правки, связанные с CSS, таким образом.
ПРИМЕЧАНИЕ: если вы измените значения на вкладке Стили, изменения сохранятся в ваших файлах .css, а не в .scss! Хотя интерфейс показывает иначе.
Дополнительная подсказка: если вы добавите символическую ссылку/установите свою платформу css в node_modules, чтобы она была доступна Devtools, вы также получите доступ ко всем sass файлам инфраструктуры. Только будьте осторожны, чтобы не подвергать весь node_modules вашему "живому обновлению" сервера Webpack, так как он захлебнется 100 000 файлов внутри node_modules для наблюдения.