Создание приложений React с помощью Create React App 2.0 с использованием Stylus для CSS

Я начал заниматься JavaScript давно, но меня бросили в серверную веб-разработку, и я полюбил Python больше. Однако по мере развития интерфейсной части ReactJS (также известный как «React») стал тем, что мне нужно для манипулирования интерфейсом в качестве замены языка шаблонов Django, когда я собирался перейти к развертыванию API.

Мне нравится, и я не один, как Python использует пробелы и отступы. Переключение контекста программирования, когда я несколько раз в день переходил от внутренней разработки к интерфейсной и обратно, меня разочаровало. Мой предпочтительный препроцессор CSS в то время был МЕНЬШЕ. Согласно тогдашней шумихе, апгрейд до LESS был SASS. Но как только я стал выглядеть как SASS, я наткнулся на Stylus. Позднее SASS превратился в SCSS.

В Интернете SASS является наиболее популярным, и он должен быть таковым, особенно для тех, кто является «традиционными» разработчиками интерфейсов, которые начали свою профессию как UI-дизайнеры, перешедшие на HTML / CSS. Но для тех, кто имеет опыт работы с Python, Stylus имеет смысл.

С появлением Create React App - CRA стало проще запускать приложение, чтобы что-то опробовать, без необходимости настраивать Webpack каждый раз одинаково. С введением CRA 2.0 были произведены обновления Webpack, а также встроенных модулей Sass и CSS с использованием разделения кода.

Добавление стилуса

Чтобы правильно освоить React, я купил курс React For Beginners Веса Боса и был очень рад видеть, что Уэс использует Stylus в этой серии для создания своего стиля CSS. Итак, я собрал свой конвейер для использования Stylus, но с Yarn в качестве менеджера пакетов. Я также убедился, что у меня есть исходные карты из файла index.styl. Вот моя конфигурация:

О картах источников

Сначала я остановился на Gulp, чтобы упростить процесс разработки внешнего интерфейса, а затем я принял Codekit, потому что он довольно хорошо абстрагировал Gulp и упростил мою работу по разработке интерфейса. Codekit очень хорошо делает все, что я хотел бы. С необходимыми настройками можно скомпилировать приложение React. Но чтобы быть на переднем крае разработки, нужно запускать Yarn в интерфейсе командной строки.

Я все завел. Проект, который я переводил на React, ранее был выполнен в Django, а стиль использовал Stylus. Я обнаружил, что исходные файлы CSS, созданные из файлов Stylus, не отображались в Chrome или Firefox DevTools.

Я обнаружил, что сервер yarn dev вставляет файлы CSS в тег заголовка index.html, и Chrome или Firefox DevTools не могут следовать ссылке на исходную карту в нижней части файла index.css и в index.styl file. Firefox DevTools по крайней мере ссылается на <inline styles sheet> в редакторе стилей. Chrome DevTools, на вкладке «Источники» можно увидеть, куда был введен index.css.

Таким образом, похоже, что в настоящее время невозможно получить доступ к исходным картам через DevTools для CRA. Надеюсь, я ошибаюсь, и мне хотелось бы получить комментарии от всех, кто это взломал.

React Styling 2.0

Могу ли я разбить свой index.styl на стили размера компонента и добавить их в компонент?

И да и нет.

Недавно CRA 2.0+ добавила возможность добавлять таблицу стилей Sass в App.js как App.sass или App.scss. Можно добиться большего, как описано на этой странице:

Как правило, мы не рекомендуем повторно использовать одни и те же классы CSS в разных компонентах. Например, вместо использования класса .Button CSS в компонентах <AcceptButton> и <RejectButton> мы рекомендуем создать компонент <Button> со своими собственными .Button стилями, которые могут отображаться как <AcceptButton>, так и <RejectButton> (но не наследовать).

«Да», если я использую Sass и создаю свой index.sass файл монолита и добавляю его в index.js, или если я разбиваю свои стили, чтобы они соответствовали компонентам, таким как компонент <Button>, упомянутый ранее.

«Нет», если я хочу использовать Stylus в своем index.styl или App.styl. Для Stylus у меня есть предварительная обработка, чтобы получить мой CSS, а затем добавить его в свой CRA.

Я надеюсь, что Stylus однажды будет добавлен в CRA. Скрещенные пальцы.