【问题标题】：Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：
【发布时间】：2019-12-04 18:27:42
【问题描述】：

我们正在将 CSS-loader 从 v0.28.11 迁移到 v3.1.0

我们有 2 个项目：

项目 A- 不依赖任何其他项目的组件 - （包含一些组件）
项目 B - 我们正在将项目 A 作为节点模块导入

我们能够成功运行和构建项目 A。但是当我们尝试运行 Project B 时，我们会收到来自 Project A 的 css 文件的依赖错误。

ERROR in ./src/help/css/about.qcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './Project/A/src/typography/css/qx-typography.css' in 'D:\Projects\B\src\help\css'
    at factory.create (D:\Projects\B\node_modules\webpack\lib\Compilation.js:823:10)
    at factory (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
    at resolver (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
    at asyncLib.parallel (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
    at D:\Projects\B\node_modules\neo-async\async.js:2830:7
    at D:\Projects\B\node_modules\neo-async\async.js:6877:13
    at normalResolver.resolve (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
    at doResolve (D:\Projects\B\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
    at hook.callAsync (D:\Projects\rx\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (D:\Projects\B\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)

如果我们将项目 A 的 css-loader 加载到 v3.1.0 并将项目 B 加载到 v1.0.0，则同样可以正常工作
但是，如果我们将两个项目的 css-loader 版本都更改为 3.1.0，则会出现编译时错误

我们应该能够使用 3.1.0 版本的 CSS-loader 运行和创建构建

【问题讨论】：

标签： reactjs webpack-4 css-loader mini-css-extract-plugin

【解决方案1】：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError：模块构建失败（来自 ./node_modules/sass-loader/dist/cj s.js）：错误：缺少绑定 /home/user/frontloja/node_modul es/node-sass/vendor/linux-x64-64/binding.node Node Sass 找不到当前环境的绑定：Linux 64-bit with Node.js 10.x 找到以下环境的绑定： - 带有 Node.js 12.x 的 Linux 64 位

在我的情况下，它发生在我将 ubuntu 18 更新到 20 之后，所以我这样做了

删除或重命名 node_modules
然后使用 npm 或 yarn install 重新安装

【讨论】：

【解决方案2】：

这个问题是因为 webpack resolve.alias not works

为了解决这个问题，我们可以使用相对路径。

就我而言

Currently, I am in Projects\B\src\help\css

and requiring file from node_Modules
/Project/A/src/typography/css/qx-typography.css

so my path be like (**Relative Path**)
../../../../node_modules/Project/A/src/typography/css/qx-typography.css";

【讨论】：

其实不是绝对路径而是相对路径（因此是../../..）。

【解决方案3】：

错误：./src/styles.css 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：错误：找不到'bootstrap/dist/css/bootstrap.min.css'

解决方案：运行以下命令安装附加包

npm install bootstrap jquery popper.js

【讨论】：