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

Question

Я думаю, что правильно следовал документации, но она не работает вообще.

Я хочу создать файл CSS и не загружать его в тегах стиля с помощью js.

В моем каталоге src :: "scss / custom.scss" и "style.scss", и ни один из них не генерируется в выходных данных.

РЕДАКТИРОВАТЬ: код SRC: https://github.com/marcosroot/webpackexample

Мои настройки:

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = true;

module.exports = {
    entry: [
        './src/toggle_menu.js',
        './src/calls_apis.js'
    ],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: devMode ? 'main.js' : 'main.[hash].js',
    },
    plugins: [
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'scss/custom.scss'),
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            }
        ]
    },
}

Answer 1

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

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 не включается как зависимость dev и не конфигурируется для нее
• Вы ошибаетесь, что такое include опция правила. Это просто означает, что только ресурсы, соответствующие тесту включения, будут обрабатываться так, как настроено в этом правиле. Вам по-прежнему нужно требовать файлы scss в какой-то момент в вашем скрипте .

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

Answer 2

Вам необходимо указать относительный путь в вашем имени файла или указать 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"
        ]
      }
    ]
  }
}