2015-05-12 6 views
1

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

... 
.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. Смотрите скриншоты:

Pre-interaction

Post-interaction

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

ответ

0

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

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

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

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

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

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

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

  • инспектор

    enter image description here
  • Source File

    enter image description here

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

  • инспектор

    enter image description here
  • Source File

    enter image description here

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

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

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

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

+0

Благодарим за ответ. Одна проблема - мы не пытаемся «изменять» правила, просто переключаем их, выключать. Думаю, это считается модификацией? –

+0

toggling === модификация -> true ...;) .... например, когда вы переключаете свойство, оно будет комментировать в источниках. –

 Смежные вопросы

  • Нет связанных вопросов^_^