Chrome DevTools сохраняет изменения CSS непосредственно в файле SASS

Возможно ли, что изменения стиля, сделанные непосредственно на панели "Стили", не только сохраняются в .css, но также и в соответствующем файле .scss?

У меня есть исходные карты CSS для каждого файла, и это хорошо работает - я могу перейти прямо в файл .scss, когда я Ctrl-Click свойства. Затем я могу отредактировать файл .scss, и он перезагрузится правильно (задача компаса в фоновом режиме), но, к сожалению, все, что я могу изменить непосредственно на панели "Стили", сохраняется только в скомпилированном файле .css.

Styles panel

Как только я изменяю значение, файл изменяется на main.css, и изменения сохраняются там:

Styles panel 2

ОТВЕТЫ

Ответ 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! Хотя интерфейс показывает иначе.

.scss is exposed and editable by Devtools

Дополнительная подсказка: если вы добавите символическую ссылку/установите свою платформу css в node_modules, чтобы она была доступна Devtools, вы также получите доступ ко всем sass файлам инфраструктуры. Только будьте осторожны, чтобы не подвергать весь node_modules вашему "живому обновлению" сервера Webpack, так как он захлебнется 100 000 файлов внутри node_modules для наблюдения.

Ответ 2

Да, это возможно.

Но с некоторыми ограничениями:

  • Не файл, а редактор - Sublime Text 3, а теперь может быть другой
  • Точный синтаксис SASS, но SCSS. Также поддерживаются МЕНЬШИЕ и простые CSS.

Для сказки может остаться реальность, вам нужны некоторые инструменты, которые вы можете найти здесь. Куча этих инструментов под названием "Emmet Live Style".

В ближайшее время разработчик обещает поддержку Stylus и SASS.

Ответ 3

Если вы настроите рабочую область, вы сможете сохранить Sass в свои файлы на вашем компьютере.

Здесь, как настроить https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s