Добавление CSS в сборку веб-пакета

Question

У меня довольно простой проект веб-пакета, созданный с использованием руководства по веб-пакету. См. https://github.com/timburgess/webpack-postcss-tailwind

В каталоге src есть style.css, но в каталог /dist не добавляется .css при сборке.

Читайте дальше, любой cssдолжен быть добавлен как встроенный стиль, но это не происходит.

Решено с https://github.com/webpack-contrib/mini-css-extract-plugin за ответ Ричардса.

Answer 1

Webpack объединит файлы css, на которые ссылаются операторы import в исходных файлах javascript, в выходной файл javascript (bundle.js). Вы увидите, что классы применяются к веб-приложению во время выполнения с помощью встроенных тегов <style>, динамически применяемых к html.

Многие разработчики считают это поведение неподходящим и используют специальный плагин для получения веб-пакета для созданияОтдельные связанные .css файлы, которые вы затем ссылаетесь в html, используя традиционный (и удобный для кэширования) тег <link rel="stylesheet" type="text/css" href="bundle.css">. См .:

https://github.com/webpack-contrib/mini-css-extract-plugin