CSS не добавляется в папку / dist с помощью Webpack 4 и MiniCssExtractPlugin - PullRequest
Новая
       11

CSS не добавляется в папку / dist с помощью Webpack 4 и MiniCssExtractPlugin

0 голосов
/ 15 февраля 2019

Issue

Могут ли какие-либо эксперты по конфигурированию Webpack сказать мне, почему я не могу извлечь свой css в папку dist при запуске npm run build?Репо здесь: https://github.com/damodog/webpack4-boilerplate

Дополнительная информация

Подводя итог, я работал с Руководствами по Webpack Guide и все шло хорошо.js и css вставлялись в мой файл index.html через теги <link> и <script> соответственно.Я установил различные загрузчики, плагины и т. Д. И разделил свои конфиги на общие (общие), файлы dev и prod (согласно документации), и жизнь была хорошей.

Я случайно сделал несколько твиков, которые включали поискв код разбивает динамический импорт , добавляя псевдонимы для путей, перемещая js в папку js и т. д., и заметил, что когда я запустил сборку npm run build, внезапно мой css не был добавлен в папку dist.Я отменил пробные изменения для динамического импорта и попытался отменить другие изменения, но проблема все еще остается.К этому моменту я не добавил git, поэтому у меня не было четкой картины «настроек», которые я сделал, чтобы найти то, что я изменил.

Что происходит

КогдаЯ запускаю мою задачу наблюдения npm start файл styles.scss (импортированный в основной файл index.js), который компилируется в css, и полученный файл app.css вставляется в страницу index.html при просмотре на моем локальном хосте.Все подливки.<link href="css/app.css" rel="stylesheet">

Когда я запускаю npm run build файл css должен быть скопирован по папке dist, должен быть добавлен хеш-идентификатор и css должен быть уменьшен.Это работало (как я уже говорил выше), и я мог видеть файл css на этапах сборки (см. Первый ресурс ниже). Кстати, здесь не учитывается разница в js-пакетных файлах по сравнению со следующим снимком экрана. Это было, когда я играл с разделением кода).

enter image description here

Теперь, когда я запускаю это, css не связывается (см. Ниже).

enter image description here

Я думаю, что это может быть связано с mini-css-extract-plugin, но я настроил это в соответствии с документацией, используя пример расширенной конфигурации (IЯ разделил их пример, который находится в одном файле конфигурации, так как у меня есть отдельные файлы конфигурации для dev и prod).

Я буквально не понимаю, почему это происходит.Помоги мне ТАК читатели.Ты моя единственная помощь ...

1 Ответ

0 голосов
/ 15 февраля 2019

Я клонировал ваш репо и экспериментировал с ним.В вашем package.json вы установили: sideEffects: false.Это приводит к потере импортированных таблиц стилей в процессе встряхивания дерева.Это описано в документах :

«Побочный эффект» определяется как код, который выполняет особые действия при импорте, кроме предоставления одного или нескольких экспортов.Примером этого являются полифилы, которые влияют на глобальную область и обычно не обеспечивают экспорт.

и

Обратите внимание, что любой импортируемый файл подвержен дрожанию дерева.Это означает, что если вы используете что-то вроде css-loader в своем проекте и импортируете файл CSS, его необходимо добавить в список побочных эффектов, чтобы оно не было непреднамеренно удалено в рабочем режиме

Так что изменитеваши побочные эффекты в package.json до "sideEffects: ["./src/scss/styles.scss"], и он будет выведен в папку назначения, когда в рабочем режиме.

...