Webpack подключение файлов css

Question

Пытаюсь разобраться с css modules, но для начала подключить просто css файлы в проекте. Есть следующий код:

package.json

{
"name": "test-css-modules",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
}
}

webpack.config.js

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

module.exports = {
entry: './src',
output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
},
mode: 'development',
module: {
    rules: [
        {
            test: /\.js/,
            use: 'babel-loader',
            include: __dirname + '/src',
        },
        {
            // test: /\.css/,
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
            // use: ['style', 'css'],
            // use: ['style-loader', 'css-loader'],
            include: __dirname + '/src',
        },
    ],
},
};

index.js

// import './app.css';
require('./app.css');

app.css

body {
    background-color: bisque;
}

При компиляции получаю следующее:

asset bundle.js 3.19 KiB [emitted] (name: main)
./src/app.css 134 bytes [built] [code generated] [1 error]

ERROR in ./src/app.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
|       background-color: bisque;
| }
@ ./src/index.js 6:0-20

webpack 5.73.0 compiled with 1 error in 125 ms

Пока тестил без css, обычный js, всё работало нормально. Пытаюсь настроить подключение css ошибка. Пробовал разные варианты, они закомментированы в коде, но ничего не помогло. Подскажите, что я делаю не так

Answer 1

Скорее всего, ошибка в том, что у вас в plugins нет нужного загрузчика. Попробуйте добавить

// ...
mode: 'development',
plugins: [new MiniCssExtractPlugin()],
module: {
// ...

Как в официальной документации к плагину MiniCssExtractPlugin.

Answer 2

В ходе манипуляций одним из вариантов решения для меня стало изменение webpack.config.js следующим образом:

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

module.exports = {
entry: './src',
output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
},
mode: 'development',
plugins: [new MiniCssExtractPlugin()],
module: {
    rules: [
        {
            test: /\.js/,
            use: 'babel-loader',
            include: __dirname + '/src',
        },
        {
            test: /\.css/,
            use: ['style-loader', 'css-loader'],

            // следующие два варианта запрещены к использованию
            // use: ['style', 'css'],
            // use: 'style-loader!css-loader',

            // ошибка была из-за этой строки
            // include: __dirname + '/src',
        },
    ],
},
resolve: {
    extensions: ['', '.js', '.jsx', '.css']
}
};

Не уверен, что данный вариант является абсолютно правильным и верным, но он работает.

БЛОГ НА HUSL

Webpack подключение файлов css

Ответы (2 шт):