Как импортировать CSS в Webpack

Question

Решил изучить Webpack, но споткнулся практически в самом начале - не смог импортировать CSS, хотя установил пакеты style-loader и css-loader, а в index.js вписал import ./sass/main.css

В webpack.condig.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.сss$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

При сборке выдаёт:

ERROR in ./src/sass/main.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: pink; }
|
 @ ./src/index.js 2:0-25

Что я сделал не так?

Answer 1

Не отчаивайтесь, попробуйте сделать вот так:

{
    test: /\.css$/,
    use: [
        {
            loader: require.resolve("style-loader")
        },
        {
            loader: require.resolve("css-loader")
        }
    ],
    include: /\.module\.css$/
}

Так же проверьте, присутствует ли у Вас расширение .css в разделе resolve:

resolve: {
    extensions: [".js", ".jsx", ".css"]
}

БЛОГ НА HUSL

Как импортировать CSS в Webpack

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