Vue Webpack 应用程序无法识别样式类

Question

我正在 vuejs 和 webpack 中制作一个 Web 应用程序，但是，webpack 不会加载我的组件（样式组件）中声明的样式类。

显然，问题可能是样式加载器配置错误，因为它是一个新项目

万一出现问题，有人可以看一下吗？

Webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const src  = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

module.exports = (env, argv) => {
    const IS_PRODUCTION = argv.mode === 'production';

    const config = {
        entry: './src/main.js',
        output: {
            path: dist,
            filename: '[name]-[contenthash].js'
        },

        resolve: {
            alias: {
                "@": src
            }
        },
        mode: argv.mode,
        devServer: {
            static: dist
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './public/index.html'
            }),
            new VueLoaderPlugin(),
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin(),
        ],
        module: {
            rules: [{
                test: /\.vue$/,
                loader: "vue-loader",
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    IS_PRODUCTION ? MiniCssExtractPlugin.loader : "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: {
                                localIdentName: "[local]--[hash:base64:6]",
                            },
                            esModule: false                         
                        },
                    }
                ]
            }, {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
                loader: "file-loader",
                options: {
                    outputPath: "assets"
                }
            }]
        },
        optimization: {
            minimizer: [
                // extend default plugins
                `...`,
                // HTML and JS are minified by default if config.mode === production.
                // But for CSS we need to add this:
                new CssMinimizerPlugin()
            ],
            splitChunks: {
                cacheGroups: {
                    commons: {
                      test: /[\\/]node_modules[\\/]/,
                      name: 'node_modules',
                      chunks: 'all',
                    },
                },
            },
        }
    };

    return config;
}

我的问题是它编译并识别 main.css 但不识别样式类。

Answer 1

以下是当您公开默认 Vue3 Webpack 配置 CLI 的配置时会发生的情况。 StackOverflow 限制字符数量，这是我的
public gists 之一，配置很长。

同时

我不建议尝试寻找任何有关 Vue3 的 Webpack 配置，因为上面列出的 CLI 已经过时，如给定页面上所述。以下是有关

旧 CLI 的一些详细信息，请勿使用它。

您应该使用 Vite，

如文档中所述以及当前最新的 CLI。

它将更快、更容易配置，并且在您需要帮助时会有更多的人来帮助您进行配置。另一方面，没有人愿意处理 Webpack 的长配置，因此获得有关该主题的帮助将非常困难。