Webpack: плагин mini-css-extract не выводит файл css

Я думаю, что ваша проблема связана с неправильным разрешением пути в вашей конфигурации:

include: path.resolve(__dirname, 'scss/custom.scss'),

Это означает, что веб-пакет должен включать только ресурс, расположенный под {root}/scss/custom.scss, и, учитывая ваше объяснение, я предполагаю, что правильный путь должен быть {root}/src/scss/custom.scss.

Итак, чтобы включить ваши два файла {root}/src/scss/custom.scss и {root}/src/styles.scss и любые другие файлы scss в папку src, вы можете использовать:

module: {
    rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        },
        {
            test: /\.scss$/,
            include: /src/, // <-- Change here ---------------------
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'sass-loader',
            ]
        }
    ]
},

Вы также можете просто удалить опцию include, если вы уверены, что в вашем проекте или узлах нет других перемещаемых файлов scss, которые могут быть найдены и не должны быть объединены в одно и то же время (вероятно, это так).

Вы также можете предоставить массив из двух файлов, добавив src в разрешение пути:

include: [
   path.resolve(__dirname, 'src/scss/custom.scss'),
   path.resolve(__dirname, 'src/styles.scss'),
]

****** РЕДАКТИРОВАТЬ *******

После вашего комментария и из вашего репо есть еще несколько ошибок:

• postcss-loader не включен в качестве зависимости разработчика, а также не настроен для него.
• Вы ошибаетесь, что такое include вариант правила. Это просто означает, что только те ресурсы, которые соответствуют тесту включения, будут обрабатываться в соответствии с настройками этого правила. Вам все еще нужно требовать файлы scss в какой-то момент вашего скрипта..

У меня есть разветвил ваше репо, и я настроил правильную конфигурацию с импортом scss в call_api.js (одна из ваших точек входа). Соберите, и вы увидите файл css в папке dist (я настроил немую конфигурацию cssnano для postcss, которая будет жестко обработана)

Вам необходимо указать относительный путь в имени файла или указать publicPath: '../' в конфигурации загрузчика https://www.npmjs.com/package/mini-css-extract-plugin#minimal-example

В моем проекте у меня есть

new MiniCssExtractPlugin({filename: DEV ? '../css/styles.css' : '../css/styles-[contenthash].css'}),

В документации приведен пример с общедоступным путем

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader"
        ]
      }
    ]
  }
}

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

• Я запустил его с webpack -p (псевдоним для производственного режима + минимизация)
• Правило css, которое я установил, не уточняло, что оно создавало побочные эффекты.

В результате, когда я запускал сборку в производственном режиме (т. е. webpack -p), она не выдавала никаких результатов, потому что когда веб-пакет увидел это…

import './my-css-file.css';

… и было похоже на «это ничего не делает, я уберу это из вашей сборки».

Поэтому, чтобы сообщить Webpack, что этот тип файла имеет значение, вы должны пометить правило как sideEffects: true

// ...
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        include: [/* fill this in */],
        exclude: /node_modules/,
        // ???
        sideEffects: true, // ? ADD THIS
        // ???
      },
    ],
  },
  // ...
}