Missing :host {} css in the build made with Webpack for Angular

I'm doing a rewrite of webpack.config.js from version 3 to 4. Angular version is 11.2.12 It builds, and starts up. However there is a problem in .scss files (besides that everything else is working fine):

:host {} is not linked to angular _nghost-lpg-c7 attributes and nothing from the css inside :host is rendered in the browser (see images). If I change host to the component name, it will work, but I'd prefer not to make those changes as more than 100+ files will be affected.

And how it is now:

Any idea where to look for the problem?

My webpack rules:

        module: {
        rules: [
            !tst && {
                enforce: 'pre',
                test: /\.ts$/,
                use: {
                    loader: 'tslint-loader',
                    options: {
                        emitErrors: false,
                        failOnHint: false
                    }
                },
                exclude: /node_modules/,
            },
            tst && {
                test: /\.ts$/,
                exclude: /node_modules|\.spec.ts$/,
                include: SRC_PATH,
                loader: 'istanbul-instrumenter-loader',
                options: {
                    esModules: true
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: ['ts-loader', 'angular2-template-loader']
            },
            !tst && {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            !tst && {
                test: /\.scss$/,
                use: [
                    'to-string-loader',
                    { loader: 'style-loader'},
                    { loader: 'css-loader', options: {url: false} },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [autoprefixer()],
                                ident: 'postcss'
                            }
                        }
                    },
                    { loader: 'sass-loader'}
                ],
            },
            !tst && {
                test: /\.html$/,
                loader: 'html-loader'
            },
            !tst && {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9]+)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    mimetype: 'application/font-woff',
                    name: makeFileName('[name].[ext]')
                }
            },
            !tst && {
                test: /\.(ttf|eot|svg|png|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9]+)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: makeFileName('[name].[ext]')
                }
            },
            tst && {
                test: /\.(scss|html|woff|ttf|eot|svg|png|gif|jpg|css)(\?v=[0-9]\.[0-9]\.[0-9]+)?$/,
                loader: 'skip-loader'
            }
        ].filter(o => o)
    },

Versions of the loaders (may be handy):

"angular2-template-loader": "0.6.2",
"css-loader": "5.2.5",
"exports-loader": "0.6.4",
"file-loader": "1.1.11",
"html-loader": "1.3.2",
"html-webpack-plugin": "4.5.2",
"imports-loader": "0.7.1",
"istanbul-instrumenter-loader": "3.0.1",
"node-sass": "5.0.0",
"postcss": "8.3.0",
"postcss-loader": "4.3.0",
"raw-loader": "4.0.2",
"resolve-url-loader": "4.0.0",
"sass-loader": "10.1.1",
"skip-loader": "1.0.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "2.0.0",
"to-string-loader": "1.1.6",
"ts-helpers": "1.1.2",
"ts-loader": "8.1.0",
"tslint": "5.20.1",
"tslint-loader": "3.5.4",
"typescript": "4.2.4",
"uglifyjs-webpack-plugin": "1.3.0",
"url-loader": "4.1.1",
"webpack": "4.43.0",
"webpack-cli": "4.7.0",
"webpack-dev-server": "3.11.2",
"webpack-merge": "4.1.4"

Any hints or ideas are welcome