Webpack打包时无法将CSS自动注入cshtml文件的问题求助

你当前配置缺少SCSS编译、CSS提取的相关loader和插件，webpack没有将scss文件处理为独立的CSS资源，因此HtmlWebpackPlugin无法自动注入CSS引用，按以下步骤修改即可：

步骤1：安装缺失依赖 #

npm install --save-dev sass sass-loader css-loader mini-css-extract-plugin

步骤2：修改webpack配置 #

2.1 引入CSS提取插件 #

在配置文件顶部新增引入：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2.2 补充output的publicPath配置 #

确保生成的资源路径匹配ASP.NET Core静态资源规则：

output: {
    filename: '[name].bundle.js',
    path: __dirname + '/wwwroot/dist/',
    chunkFilename: '[id].js',
    publicPath: '~/dist/' // 新增该行
},

2.3 完善SCSS处理规则 #

替换原有scss测试项的配置：

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader, // 提取CSS为独立文件
        'css-loader', // 处理CSS内部导入、路径解析逻辑
        'sass-loader', // 编译SCSS为标准CSS
        'webpack-import-glob-loader' // 保留原有的glob导入处理能力
    ]
},

2.4 新增CSS提取插件到plugins数组 #

plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].bundle.css' // 定义生成的CSS文件名规则
    }),
    // 保留你原有的两个HtmlWebpackPlugin配置不变
    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"
    }),
]

验证效果 #

重新执行webpack构建后，生成的cshtml文件head标签内会自动注入对应的CSS引用：

<link href="~/dist/main.bundle.css" rel="stylesheet">

内容的提问来源于stack exchange，提问作者3xGuy