Webpack: после сборки подхватываются стили для тегов, но не для классов

Question

Пытаюсь создать простую страничку-баннер, но по итогам сборки не подхватываются нужные стили. Если указывать их для тегов

  div {
     background:red;
     }

то подхватываются, а для классов

.container {
 background:red;
 }

не работает... Нашла похожую тему https://translated.turbopages.org/proxy_u/en-ru.ru.f89b6a0d-63bed1e2-167cf029-74722d776562/https/stackoverflow.com/questions/54593484/css-configuration-in-webpack-not-detecting-class-styles-but-detects-element-styl но в моем случае не используется css modules и решение неактуально.

Мой webpack.conf:

const ieConfThree = {
    entry: {
        arm: path.resolve(__dirname, 'IE/index.js'),
    },
    target: ['web', 'es5'],
output: {
    filename: '[name].[contenthash].ie.bundle.js',
    path: path.resolve(__dirname, 'ISU/dist'),
    publicPath: '/dist/',
},

module: {
    rules: [
        { test: /\.html$/i, loader: 'html-loader' },
        {
            test: /\.js$/,
            include: [path.resolve(__dirname, 'IE')],
    
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                            ],
                        ],
                    },
                },
            ],
        },

        {
            test: /\.s?css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './',
                    },
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: 'postcss-loader',
                },
            ],
        },

        {
            test: /\.ico|\.png|\.gif|\.svg|\.jpg($|\?)/,
            generator: {
                filename: 'images/[name][ext][query]',
            },
            type: 'asset/resource',
        },
    ],
},

plugins: [
    new HtmlWebpackPlugin({
        title: 'АС ИСУ',
        template: path.resolve(__dirname, 'IE/ieMock.html'),
        filename: path.resolve(__dirname, 'ISU/IENotSupport.html'),
    }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
],

};

    module.exports = [ieConfThree];

Мои html и css файлы:

.ie-support-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: #00A698;
    border: black;
}

.ie-support-container__el {
   padding: 40px;
    background: #00A698;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<base href="/">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<main>

<div class="ie-support-container">
    <div class="ie-support-container__el">
        <h1>
           Internet Explorer
        </h1>
        <p>
           !!!!
        </p>
    </div>

    <div class="ie-support-container__el">
    <div class="browser_label">
        <img src='./images/Browser.svg' />
        <span>Browse</span>
    </div>
    <div class="browser_label">
        <img src='./images/Browser.svg' />
        <span>Browse2</span>
    </div>

</div>
</div>

</main>
</body>
</html>

В чем может быть ошибка?

БЛОГ НА HUSL

Webpack: после сборки подхватываются стили для тегов, но не для классов

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