Sass Sourcemap с Chrome DevTools

Question

Мы не используют gulp-sass скомпилировать нашу SCSS, и с помощью gulp-sourcemaps для создания sourcemaps в нашей Dev среде:

... 
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init())) 
.pipe(plugins.sass({ 
    outputStyle: "nested" 
})) 
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./"))) 
... 

Sourcemaps получить сгенерированные, никаких проблем. При проверке элементов в Chrome DevTools мы можем увидеть исходное определение SASS, но как только мы изменим значение или выбор атрибута, мы потеряем исходную карту и покажем строку в скомпилированном CSS. Смотрите скриншоты:

Очень раздражает, и ничего мы пытались не исправил. Какие-либо предложения? Обратите внимание, что в Firefox мы не видим той же проблемы.

Answer 1

Crux: Вы не можете изменить правила SCSS свойства внутри инспектировать элемент панели хромовых Devtools. Тем не менее, мы можем редактировать исходные файлы (sass/scss) внутри исходной панели хрома, используя хромированные рабочие области.

У меня была та же проблема. Мне пришлось поцарапать голову на целый день, чтобы понять проблему и сделать мой sass/scss доступным для редактирования в браузере. Вот оно:

1.) Sourcemaps предназначены для ссылки на ваши исходные файлы, не редактирующие ваши исходные файлы (sass/scss), чтобы вы могли отлаживать свой код. мы можем т.е. передать ту строку, который вызвал наше скомпилированное правило CSS, но не редактировать его

2.) Chrome делает это правильно, немедленно заменив правила SCSS с скомпилированным CSS, потому что хром работает с CSS. Он не компилирует ваш scss.

Также, когда вы вносите какие-либо изменения в правило css, это правило также изменяется в исходном файле (.css) также на вкладке источников хрома. Это означает, что изменения, которые мы делаем в инспекторе, напрямую сопоставляются с нашими css-файлами.

Например, когда я изменяю какое-либо свойство в инспекторе, оно также изменяется в исходном файле css.

Первоначально

• инспектор
  
  
• Source File
  
  

После Изменение свойства

• инспектор
  
  
• Source File
  
  

3.) Что касается Firefox, вы можете подумать, его работу в случае светлячок, но я думаю, что его бит вводит в заблуждение. Его вводящий в заблуждение, поскольку firefox ничего не меняет в любом исходном файле (ни css, ни scss), поэтому мы не знаем, что они на самом деле делали, действительно ли они скомпилировали наш scss-файл или использовали css под капотом.

• Когда я говорю исходные файлы это означает файлы, присутствующие в исходной панели хром и стиль редактора в светлячок

4.) Наконец, если вы действительно хотите Редактировать вы sass/scss файлы на лету в исходной панели хрома вы должны посмотреть chrome workspaces. Но опять же вы wont сможете сделать Изменения в свойствах scss правил в проверить элементы вкладки.

** Опять же, используя хромированные рабочие области Безразлично, т фактически компилирует наш SCSS в CSS в браузере, что на самом деле происходит в том, что браузер отображает наши файлы (в закладке Источник) для системных файлов (вроде делает браузер нашего редактор кода)