Vue+Webpack项目无法识别组件内样式类问题求助

使用Vue.js + Webpack开发Web应用时，组件内声明的样式类无法生效，但项目能正常编译且main.css可正常识别，问题源于Webpack配置错误。

核心问题1：全局启用CSS Modules导致组件样式类名不匹配 #

当前Webpack配置中，css-loader全局开启了CSS Modules，所有.css文件（包括Vue组件内<style>编译后的样式）都会被模块化处理，类名会被重写为[local]--[hash:base64:6]格式，但Vue组件模板中仍使用原始类名，导致无法匹配。

解决办法：拆分CSS处理规则，区分全局样式与组件样式
修改module.rules中的CSS规则，将全局.css文件（如main.css）与Vue组件内的样式分开处理，仅对需要模块化的场景启用CSS Modules：

module: {
    rules: [
        // ... 其他规则保持不变
        {
            // 处理全局.css文件，不启用CSS Modules
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                IS_PRODUCTION ? MiniCssExtractPlugin.loader : "style-loader",
                {
                    loader: "css-loader",
                    options: {
                        esModule: false
                    },
                }
            ]
        },
        {
            // 处理Vue组件内的<style>，支持<style module>语法
            test: /\.vue$/,
            loader: "vue-loader",
            exclude: /node_modules/,
            options: {
                css: {
                    esModule: false
                }
            }
        }
        // ... 其他规则保持不变
    ]
}

若需在特定Vue组件中使用CSS模块化，只需在组件的<style>标签上添加module属性，模板中通过$style访问重写后的类名：

<template>
    <div :class="$style.customClass">示例内容</div>
</template>

<style module>
.customClass {
    color: red;
}
</style>

核心问题2：MiniCssExtractPlugin未按环境条件加载 #

当前配置中，无论开发还是生产环境都添加了MiniCssExtractPlugin，但开发环境应使用style-loader将样式注入DOM，生产环境才用该插件提取独立CSS文件，两者同时存在会导致样式处理冲突。

解决办法：仅在生产环境添加MiniCssExtractPlugin
修改plugins数组，根据环境判断是否添加该插件：

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './public/index.html'
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    // 仅生产环境添加该插件
    ...(IS_PRODUCTION ? [new MiniCssExtractPlugin()] : [])
],

额外优化：调整devServer配置 #

当前devServer.static指向dist目录，但开发环境下Webpack Dev Server默认使用内存编译，无需指向打包后的目录，建议修改为指向静态资源目录：

devServer: {
    static: './public',
    hot: true // 开启热模块替换，提升开发体验
}

内容的提问来源于stack exchange，提问作者Erick Fabian Carrasco Talledo