@aivazovski

Как подключать стили, что бы во время сборки webpack их видел?

Привет.
Пишу тут приложение на react и пытаюсь настроить webpack для работы.
Однако есть проблема, я писал стили в style.css и держал их рядом с index.html, а подключал через строку в index.html
<link rel="stylesheet" href="./style.css">
я настроил, что бы webpack собирал стили в отдельный bundle.css, но после сборки там нет содержимого моего style.css, однако есть стили от плагинов.

Собственно вопрос, каким образом мне подключать стили к приложению, что бы webpack учитывал их и добавлял в бандл ?
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
@alexhovansky
1) В index.js сделать импорт стилей, import "style.css";
2) Добавляете свой style.css в качестве entry в конфиге
entry: [
        './src/ts/index.tsx',
        './src/assets/styles/style.styl'
    ],

(на ts и styl не обращайте внимание, в Вашем случае просто ...style.css)

Не забываете про
new MiniCssExtractPlugin({
            filename: './assets/css/bundle.css',
        })

чтобы появился соответствующий в вашего итогового index.html

Разница в том, что в 1м случае стили станут частью bundle.js, а во 2м случае - отдельным файлом.
Лично я считаю, что не стоит раздувать размеры итогового бандл, но тут уж как Вам нравится.

Само собой, не забывайте про лоадеры, в зависимости от выбранного варианта они разнятся
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Spar-online Нижний Новгород
от 150 000 до 170 000 руб.
от 100 000 до 120 000 руб.
YLab Тольятти
от 90 000 до 140 000 руб.
18 янв. 2019, в 18:11
1000 руб./за проект
18 янв. 2019, в 18:04
10000 руб./за проект