Webpack и MiniCssExtractPlugin не связывают файлы CSS

Question

Я пытаюсь следовать руководству здесь: https://webpack.js.org/plugins/mini-css-extract-plugin/

Мой конфиг точно такой, как указано там. Моя цель - создать один CSS-файл, который представляет собой набор из нескольких CSS-файлов, расположенных в src/css/ папка.

Когда я запускаю сборку, я не получаю никаких файлов CSS в dist/ папка.

Я думаю, что мне не хватает, как на самом деле включить файлы CSS в сборку. Эти CSS-файлы не упоминаются где-либо в моем коде, они динамически внедряются JavaScript, который добавляет <link> пометить в документе.

Как мне указать webpack, чтобы он собирал и связывал файлы CSS, если на них нет явной ссылки в моем коде?

Answer 1

Я нашел это - этот синтаксис нигде не упоминается в документации.

Вы можете упомянуть файлы CSS в любом файле JavaScript, и тогда MiniCssExtractPlugin подберет его. Пример:

import './css/button.css';
import './css/chat.css';

Answer 2

@user6269864 Он ссылается на то, что во 2-м предложении описания в mini-css-extract-plugin:

Он создает файл CSS для каждого файла JS, который содержит CSS.

Чтобы включить CSS в файл Js, webpack обеспечивает импорт через базовую конфигурацию, подобную этой:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Вышеупомянутая конфигурация находится в их документации, которая также включает в себя, как импортировать: import css from 'file.css'; Webpack css-загрузчик