Webpack 没有注入 css 到 cshtml

Question

我正在尝试添加使用 webpack，它不会将 CSS 添加到 cshtml 文件。

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;

生成_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" class="container">
            @RenderBody()
        </div>

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

如您所见，它确实添加了很棒的捆绑文件。但它不适用于 CSS.

有人可以告诉我我在这里缺少什么吗？

Answer 1

我能够让它工作。使用

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

我希望这对处于同一位置的其他人有所帮助。

Webpack 没有注入 css 到 cshtml

Webpack not injecting css to cshtml

webpack