Создание приложений 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. Скрещенные пальцы.