即使安装了适当的加载器，Webpack 也无法识别 CSS 文件答案

【问题标题】：Webpack not recognizing CSS files even with the appropriate loaders installed即使安装了适当的加载器，Webpack 也无法识别 CSS 文件
【发布时间】：2021-11-28 09:51:50
【问题描述】：

即使安装了适当的加载器，webpack 似乎也无法识别我的 CSS 文件...

webpack.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => {
    let devType = env.production || false;
    console.log(devType);

    return {
        mode: devType ? "production" : "development",

        entry: "./src/js/app.js",

        output: {
            filename: "js/app.bundle.js",
            path: path.resolve(__dirname, "docs"),
            assetModuleFilename: "imgs/[name][ext]",
            clean: true
        },

        devServer: {
            static: {
                directory: path.resolve(__dirname, "./docs")
            },
            port: 5001
        },

        module: {
            rules: [{
                    test: /\.html/g,
                    use: ["html-loader"]
                },

                {
                    test: /\.(svg|ico|webp|png|jpg|jpeg|gif)$/,
                    type: "asset/resource"
                },

                {
                    test: /\.css/g,
                    use: [
                        devType ? MiniCssExtractPlugin.loader : "style-loader",
                        {
                            loader: "css-loader"
                        }
                    ]
                }
            ]
        },

        plugins: [
            new HtmlWebpackPlugin({
                filename: "index.html",
                template: path.resolve(__dirname, "./src/index.html")
            }),
            new MiniCssExtractPlugin({
                filename: "css/main.css"
            })
        ]

    };
};

package.json：

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:dev": "webpack --watch",
    "build:prod": "webpack --watch --env production",
    "start:dev": "webpack serve --open",
    "start:prod": "webpack serve --open --env production"

  },
  "keywords": [],
  "author": "bunee",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0"
  }
}

app.js：

import "../css/normalize.css";
import "../css/app.css";

console.log("bunee");

错误：

我不得不再提一件事，如果在 app.js 中只导入一个 CSS 文件，一切都可以正常工作。仅当我尝试导入多个 CSS 文件时才会出现此问题。

如果我没有说清楚，请随时问我问题。

【问题讨论】：

你不是要把 CSS 导入变量吗？
@connexo 这是可选的...无论如何，将 CSS 导入变量仍然会产生相同的错误

标签： css webpack webpack-5 webpack-loader

【解决方案1】：

我意识到我的错误，这是罪魁祸首。

是的，我使用的正则表达式就是问题所在（face palms）。我用/(\.css)$/ 替换了它，一切正常。如果将来有人觉得这有帮助，你最好感谢我。为了解决这个愚蠢的错误，我的头皮掉了太多头发。

【讨论】：