Можно ли заставить Chrome сохранять изменения в SCSS также, как он их сохраняет в CSS?

Question

Вопрос для экспертов SASS/SCSS.

Если в Google Chrome в инструментах разработчика на вкладке Sources добавить в Filesystem папку со скриптами (рис 1), то все изменения CSS вносимые на вкладке Elements (рис 2), моментально сохраняются в CSS на жёстком диске (рис 3).

Также все изменения можно наблюдать на вкладке Changes (рис 4).

Если получаю CSS из SCSS с сохранением sitemap, то браузер видит все стили как будто бы они берутся из SCSS (рис 2). Но, изменения всё также сохраняются только в файле CSS (рис 3), при этом код SCSS остаётся без изменений (рис 5).

Можно ли заставить Chrome работать с SCSS также как и с CSS? Или есть более эффективные способы корректировки стилей?

Answer 1

Все гораздо проще! Распишу алгоритм, как это работает...

Сделали проект в котором руками создали styles.css, можно пустой;
Загрузили проект в DevTools в закладке Sources;
Открыли там styles.css;
Во внешнем редакторе изменили и сохранили содержимое styles.css;
DevTools должен автоматически увидеть изменения файла и перезагрузить его;

На этом этапе проверили, что DevTools "следит" за изменением. Если этого не происходит - ищем в сети хелп по настройке этого. Статей просто море, и нет смысла тут дублировать. По-умолчанию DevTools не генерирует sourcemap файл, а оно нам и не надо. Далее настраиваем sass-компилятор. Я советую Koala. Хотя проект и закрыт уже, но все, что нужно (по крайней мере мне) - в нем есть.

Скачиваем, устанавливаем, открываем в нем проект, настраиваем автокомпиляцию и генерацию sourcemap;
Тестируем. Для этого внесем изменения в файл styles.scss, и нажимаем Ctrl+S для сохранения файла;
Наблюдаем - должна произойти автокомпиляция, должен перезаписаться styles.css, он должен автозагрузиться в DevTools, должен создаться sourcemap файл, (и если открыта нужная страница в браузере - зразу должны произойти изменения в ней).

Итог

Бинго! Одно нажатие Ctrl+S - и все отработало автоматом.

Замечания

Koala - имеет встроенные компиляторы, но можно и подключать внешние (допустим, более свежие, более свежего стандарта);
Koala - много чего умеет, в том числе сжимать результирующие файлы (min-версии)
Koala - капризничает, если в $HOME есть non-ASCII символы, но это решается, решение ниже.

!!! Не обязательно в C:/Users/Default/docker/.koala - куда пожелаете, главное, 
!!! чтобы в пути не было non-ASCII символов.

If you don't want to change you home folder name, try this:

Shut down the Koala. Move USER_HOME/.koala to C:/Users/Default/docker/.koala
use any path that is free of non ASCII chars.

in file C:\Program Files (x86)\Koala\app\scripts\FileManager.js

replace:
exports.userDataDir = path.join(process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'], (process.platform === 'darwin') ? 'Library/Application Support/Koala/UserData' :'.koala');

with:
exports.userDataDir = 'C:/Users/Default/docker/.koala';

in file C:\Program Files (x86)\Koala\app\scripts\pages\log.js
replace:
var errorLog = process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'] + '/.koala/error.log';

with:
var errorLog = 'C:/Users/Default/docker/.koala/error.log';

БЛОГ НА HUSL

Можно ли заставить Chrome сохранять изменения в SCSS также, как он их сохраняет в CSS?

Ответы (1 шт):