Как добавить стиль в проект React
Итак, я написал действительно простое приложение React, но не использовал настройку create-response-app. Я хотел сам узнать, как на самом деле строится что-то вроде CRA. Я просто использовал webpack для сборки и сборки своего приложения React. В настоящее время у меня есть загрузчик Babel для перевода моего React / JSX и «html-loader» для моего HTML, я думаю (я читал руководство по Webpack, в котором говорилось, что он мне нужен, но я все еще не понимаю, почему у меня перевести мой HTML? Это HTML, на что он вообще переводится)?
В моем проекте пока нет стилей CSS, и я хочу узнать, как их добавить. Но я не понимаю, какие загрузчики мне следует использовать. Я почти уверен, что мне понадобится загрузчик Less для моих файлов .less, но загрузчик Less компилирует Less в CSS. Итак, нужен ли мне загрузчик CSS для скомпилированных файлов less? И тогда мне понадобится загрузчик стилей для CSS?
После прочтения сообщения Medium я только немного запутался. Я понимаю, что мне, вероятно, понадобится Less, CSS и загрузчик стилей, но теперь я не понимаю, как правильно отображать стили и прочее. Итак, должен ли я просто импортировать CSS в компоненты React и включать его в качестве атрибута в каждый компонент, который я пишу? Нужно ли мне связать таблицу стилей .less с моим файлом index.html?
Ответы 2
Вам потребуются следующие загрузчики:
style-loadercss-loaderless-loader
Итак, в основном конфигурация веб-пакета выглядит следующим образом:
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
}
]
}
Проверьте этот отвечать, чтобы узнать, что делает каждый загрузчик.
Возможно, вы захотите рассмотреть https://www.styled-components.com/. Эта библиотека позволяет вам размещать вашу таблицу стилей вместе с вашими реагирующими компонентами. Если я прав, использование этой библиотеки не изменит вашу текущую конфигурацию webpack.
Если вам нужен более "традиционный" подход к стилизации вашего приложения реакции, вам понадобятся как минимум два загрузчика для конфигурации вашего веб-пакета: style-loader и css-loader.
Загрузчики less и sass потребуются, если вы собираетесь использовать препроцессоры css.
Прочтите это, это будет весьма полезно. medium.freecodecamp.org/…