Блог

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

Что я хочу, так это сгенерировать файл 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',
                ]
            }
        ]
    },
}
  

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

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

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

 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
        // 👆👆👆
      },
    ],
  },
  // ...
}
  

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

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

Это означает, что webpack должен включать только ресурс, расположенный под {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"
        ]
      }
    ]
  }
}