Webpack 5搭配mini-css-extract-plugin后CSS无法加载问题求助

我使用mini-css-extract-plugin可以成功将SCSS文件编译为CSS文件，但React应用页面加载时样式未生效。我怀疑是输出或导入路径配置有误，尝试了多种组合仍未解决，此前使用inline style-loader时导入路径是正常的。相关配置如下：

webpack入口配置 #

entry: {    
    index: './src/index.js',
},
output: {
    filename: '[name].js'
},

webpack模块配置 #

module: {
    rules: [
    {
    test: /\.(sass|less|css|scss)$/,
    sideEffects: true,
    use: [
       MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader",
    ],
  },          
    {
      test: /\.js?$/,
      exclude: /node_modules/,              
      loader: 'babel-loader',          
      options:{
        presets: ['@babel/preset-react']
      }
    }

],          
},

webpack插件配置 #

plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[id].css",
    })
]

React组件中的导入语句（mainListing.js，index.js中的路由组件） #

import './css/index.scss'

1. 补充publicPath配置 #

webpack的output缺少publicPath会导致浏览器加载CSS时路径错误。修改output配置：

output: {
    filename: '[name].js',
    publicPath: '/' // 部署在子路径的话改成对应路径，比如'/my-app/'
},

2. 确保HTML正确引入CSS #

• 手动引入：如果是手动编写的HTML模板，在<head>里添加CSS引用：

  <link rel="stylesheet" href="/css/index.css">
  

• 自动注入：使用html-webpack-plugin让webpack自动插入CSS和JS引用：
  1. 安装依赖：npm install html-webpack-plugin --save-dev
  2. 修改webpack插件配置：

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     plugins: [
         new MiniCssExtractPlugin({
           filename: "css/[name].css",
           chunkFilename: "css/[id].css",
         }),
         new HtmlWebpackPlugin({
           template: './public/index.html' // 替换成你的HTML模板实际路径
         })
     ]
     

3. 检查CSS输出位置 #

确认编译后css/index.css是否生成在预期的输出目录（比如dist/css/index.css），如果路径不符，调整MiniCssExtractPlugin的filename配置。

4. 确认sideEffects配置 #

检查项目根目录的package.json，确保CSS/SCSS文件被标记为有副作用，避免webpack树摇移除：

{
  "sideEffects": ["*.css", "*.scss"]
}

内容的提问来源于stack exchange，提问作者Anastasia Sitnina