Как добавить стиль в проект React

Question

Итак, я написал действительно простое приложение React, но не использовал настройку приложения create-Reaction-app. Я хотел самостоятельно узнать, как на самом деле создается нечто вроде CRA. Я просто использовал webpack для сборки и комплектации своего приложения React. В настоящее время у меня есть загрузчик Babel для перевода моего React / JSX и «html-загрузчик» для моего HTML, я думаю (я читал учебник для Webpack, в котором говорилось, что он мне нужен, но я все еще не понимаю, почему у меня есть перевести мой HTML? Это HTML, что он вообще переводит)?

Мой проект в настоящее время еще не имеет стиля CSS, и я хочу узнать, как его добавить. Но я не совсем понимаю, какие загрузчики мне следует использовать. Я уверен, что мне понадобится загрузчик Less для моих файлов .less, но загрузчик Less компилирует Less в CSS. Так что мне понадобится загрузчик CSS для скомпилированных файлов меньше? И тогда мне нужен загрузчик стилей для CSS?

Answer 1

Возможно, вы захотите рассмотреть https://www.styled -components.com / . Эта библиотека позволяет вам найти вашу таблицу стилей вместе с вашими компонентами реагирования. Если я прав, использование этой библиотеки не изменит вашу текущую конфигурацию веб-пакета.

Если вы хотите использовать более «традиционный» подход к стилизации вашего реагирующего приложения, вам понадобится как минимум два загрузчика для конфигурации веб-пакета: style-loader и css-loader.

меньше и sass-загрузчики потребуются, если вы собираетесь использовать css-препроцессоры.

Answer 2

Вам понадобятся следующие загрузчики:

1. style-loader
2. css-loader
3. less-loader

Таким образом, в основном конфигурация веб-пакета выглядит следующим образом:

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                {
                 loader: "style-loader"
                }, 
                {
                 loader: "css-loader"
                }, 
                {
                 loader: "less-loader"
                }
            ]
        }
    ]
}

Отметьте этот ответ , чтобы узнать, что делает каждый загрузчик.