1

Написал вот такой конфиг:

const path = require('path');
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');

module.export = {
   entry: { main: './src/index.js' },
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js'
   },
   module: {
     rules: [
       {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
       },
       {
          test: /\.(sa|c)ss$/,
          use: [
             {
                loader: MiniCssExtractPlugin.loader,
                options: {
                   publicPath: '../',
                   hmr: process.env.NODE_ENV === 'development'
                }
             },
             'css-loader',
             'sass-loader'
          ]
       }
     ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
   })
  ]
}

И получаю ошибку: in ./src/css you may need to appropriate loader to handle this file type.

Структура папок -webpack.config -src -style.css

Код практически весь копировал с официального сайта, не могу понять в чем проблема. Кто знает, буду благодарен)

1 ответ 1

1

publicPath кидаем в output, учитываем что у нас может быть .css, при hmr лучше себя чувствует style-loader (но это вкусовщина). и получаем нечто вроде

const {join} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        main: './src/index.js',
    },

    output: {
        path: join(__dirname, './dist'),
        filename: 'main.js',
        publicPath: '../',
    },

    module: {
        rules: [
            {
                test: /\.s?[ca]?ss$/,
                use: [
                    process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {test: /\.jsx?$/, loader: 'babel-loader'},
        ],
    },

    plugins: [
        new MiniCssExtractPlugin({filename: '[hash].css'}),
    ],
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.