Webpack not injecting css to cshtml-CodePudding

I'm trying to add use webpack and it will not add the CSS to cshtml file.

webpack.common.config

const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
    target: 'web',
    entry: ['./Client/src/app.js', './Client/src/app.scss'],
    output: {
        filename: '[name].bundle.js',
        path: __dirname   '/wwwroot/dist/',
        chunkFilename: '[id].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.js$/,
                use: 'webpack-import-glob-loader'
            },
            {
                test: /\.scss$/,
                use: 'webpack-import-glob-loader'
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: "body",
            filename: "../../Views/Shared/_LoginLayout.cshtml",
            template: "./Views/Shared/_LoginLayout_Template.cshtml"
        }),
        new HtmlWebpackPlugin({
            inject: "body",
            filename: "../../Views/Shared/_Layout.cshtml",
            template: "./Views/Shared/_Layout_Template.cshtml"
        }),
    ]
};
module.exports = config;

Generated _Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"] - PipelineSolutions</title>
    <link rel="icon" type="image/svg" href="~/pipelines_managment.svg" />
    <script src="https://kit.fontawesome.com/7466cd573b.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="~/assets/fonts/roboto/roboto.css" asp-append-version="true"/>
    

    @await RenderSectionAsync("Styles", false)
</head>
<body>

    <partial name="_Sidebar" model="@ViewData["SidebarItems"]" />

    <div id="main-content">
        <partial name="_Navbar" />
        <div id="loading">
            <img id="loading-image" src="~/rotating_icon.gif" alt="Loading..." />
        </div>
        <div id="main-container" >
            @RenderBody()
        </div>

        <div id="user-notifications"></div>
    </div>
    
    @await RenderSectionAsync("Scripts", required: false)
<script defer src="~/dist/main.bundle.js"></script></body>
</html>

As you can see it does add the bundle file which is great. but it doesn't apply the CSS.

Can someone please tell me what I'm missing here?

CodePudding user response：

I was able to get this to work. using

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//and adding this plugin
new MiniCssExtractPlugin({
        insert:'head'
    })

I hope this helps others in the same spot.