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

Question

[aivazovski]

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

Собственно вопрос, каким образом мне подключать стили к приложению, что бы webpack учитывал их и добавлял в бандл ?

Answer 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м случае - отдельным файлом.
Лично я считаю, что не стоит раздувать размеры итогового бандл, но тут уж как Вам нравится.

Само собой, не забывайте про лоадеры, в зависимости от выбранного варианта они разнятся

Comments

[aivazovski]

Большое спасибо, это мне помогло.

Сейчас не работают только ссылки на svg которые я подключал через

<img className="todo__button" src={require('../resources/edit.svg')} alt="edit this todo" onClick={dispatchEditTodo}/>

в браузере там теперь почему то:

<img class="todo__button" src="[object Module]" alt="edit this todo">

можете подсказать почему ?

[alexhovansky]

Всегда пожалуйста)

Что-то не так с loader'ом, рецепта 2:
1) гуглите на тему лоадеров, у меня в одном из проектов было вот так:

{
                test: /\.svg$/i,
                resourceQuery: /external/,
                loader: 'file-loader',
                exclude: /node_modules/
            },
            {
                test: /\.svg$/i,
                loader: 'raw-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(svg)$/i,
                loader: 'file-loader',
                options: Object.assign({
                    mimetype: 'image/svg+xml'
                }, {
                    name: isDevelopment() ? '[name].[ext]' : '[name].[hash:8].[ext]'
                }),
                include: /node_modules/
            }

svg, как следует из кода, я включал в итоговый бандл.

2) Забейте и используйте copy webpack plugin, он просто будет копировать указанные папки/файлы из Ваших исходников в build папку. В результате можете просто в папке build получит директорию assets с 2мя дочерними: img, css. Ну с путями уж разберетесь.

[aivazovski]

alexhovansky, после первого способа, что то произошло и теперь в src="" вставляется всё содержимое svg файла. :)

<img class="todo__button" src="&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&#13;&#10;&lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;&#13;&#10;&lt;!DOCTYPE svg PUBLIC ... 1,1v13C20,27.559,20.447,28.006,21,28.006z M21,14.005h2v13h-2V14.005z&quot;/&gt;&#13;&#10;&lt;/g&gt;&#13;&#10;&lt;/svg&gt;&#13;&#10;" alt="delete this todo">

попробую второй способ.

[aivazovski]

alexhovansky, решил проблему с картинками вторым способом.

[alexhovansky]

По первому способу, видимо потому, что я забыл дописать про SVGInline, npm пакет 'react-svg-inline'.
Делаете import svg, а потом его в этот самый SVGInline передаёте