Как включить source-map для css в приложении create-react-app?

183
25 апреля 2018, 03:43

Переношу шаблон в CRA. Стили ведут себя не вполне правильно. Devtools указывает на инлайн-стили, вставленные webpack-ом, ковыряться в которых очень неудобно. Изначально стили в SCSS, собраны в один файл CSS с source-map и так уже импортированы в приложение. Можно ли сделать так, чтобы devtools показывал, если не на исходный scss, то хотя бы на конкретные строки в импортируемом файле css? Уточнения:

  • без eject. Рассматриваю react-app-rewire, но пока не очень понимаю, как его конфигурировать.
  • SCSS собран в CSS по документации CRA. Source-map включены.
  • при билде приложения так же создаётся source-map файл конечного файла CSS. Но в браузере я вижу только инлайн-стили. Может, что-то в devtools нужно включить?
Answer 1

Есть официальная документация create-react-app.

https://github.com/facebook/create-react-app/ - github. Из документации можно понять, что все сложные конфигурации можно производить после eject-a всех конфигов с помощью команды npm run eject.

Так же есть инструкция для добавления своего препроцессора: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Вариант с экспортом конфигурации:

  1. Выполнить команду npm run eject
  2. Перейти в файл webpack.config.dev.js и добавить в css-loader свойство sourceMaps: true | https://monosnap.com/file/ad179NTDG6wSKbfNDt8V9zdjDpcfJC https://monosnap.com/file/EOKbI8K5FxBViROJZR0WDf31JA2j1H - Получаем sourceMaps для css.
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте 1nnc.net
ТОП-10
READ ALSO
При дебаге в VS-2015 asp.net mvc скрипт не сохраняется
HTML

При дебаге в VS-2015 asp.net mvc скрипт не сохраняется

Есть скрипт на jsОн подключается в представлении

 174
Обработка адреса сайта
HTML

Обработка адреса сайта

Добрый вечерЕсть такое условие:

 148
Как повернуть по вертикале `dots` в slick slider?
HTML

Как повернуть по вертикале `dots` в slick slider?

Как повернуть точки с горизонтального положения в вертикальное?

 142
Склеивание слов minifyHTML
HTML

Склеивание слов minifyHTML

Столкнулся с проблемой при минификации HTML, некоторые слова между которыми есть <br> - в моб версии делаем ему br { display: none }И вместо Привет...

 174