vue-cli@3 没有可用于依赖类型的模块工厂：CssDependency答案

【问题标题】：vue-cli@3 No module factory available for dependency type: CssDependencyvue-cli@3 没有可用于依赖类型的模块工厂：CssDependency
【发布时间】：2020-04-22 01:01:27
【问题描述】：

当我使用 vue-cli@3 时

npm run build

系统提示生成此错误No module factory available for dependency type: CssDependency

我搜索了很多相关的问题，但都是有棱有角的，我也试过了

rm -r 节点模块
rm package-lock.json
npm 我

但是还是会出现这个错误，我想知道如何解决这个问题

这是我的错误的详细信息

ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:800:12)
    at iterationOfArrayCallback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:208:3)
    at addDependenciesBlock (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:816:5)
    at Compilation.processModuleDependencies (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:827:4)
    at afterBuild (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:954:15)
    at buildModule.err (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:998:11)
    at callback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:734:5)
    at module.build.error (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:782:12)
    at handleParseResult (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:478:12)
    at doBuild.err (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:500:6)
    at runLoaders (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:358:12)
    at E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at childCompiler.runAsChild (E:\Games\Hitokoto\node_modules\mini-css-extract-plugin\dist\loader.js:198:12)
    at compile (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Games\hitokoto\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Games\hitokoto\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (E:\Games\hitokoto\node_modules\webpack\lib\Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Games\hitokoto\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
E:\Games\hitokoto\node_modules\neo-async\async.js:16
    throw new Error('Callback was already called.');

那么下面是我的 package.json 文件

{
  "name": "hitokoto",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.6.10"
  }
}

【问题讨论】：

标签： javascript vue.js webpack vue-cli

【解决方案1】：

我遇到了同样的问题，并发现它与运行 npm run build 命令时的所用路径的大写/小写有关。

使用 Powershell 或 cmd，我这样做了：

C:\> cd C:\git\testing
C:\git\testing> npm run build

得到了和你一样的错误。

然后我这样做了（注意大写 GIT）：

C:\>cd C:\GIT\testing
C:\GIT\testing> npm run build

然后它起作用了。我在 Windows 10 上。

【讨论】：

同样的问题确实是路径的大小写造成的
我不敢相信这是问题所在。如此简单...非常感谢！
Webpack 几乎无法使用的另一个原因
请问您是如何知道路径的哪一部分需要更改大小写才能使其工作的？
最简单的方法是在编写'cd'命令时使用TAB完成，因为它会自动建议正确的大小写。

【解决方案2】：

这可能是由 MiniCssExtractPlugin 引起的， module/rules 和 plugins

都应该使用它

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//define module\rules
{
    test:/\.css$/, 
    use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

//set plugins
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

更多信息请看这里：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493

【讨论】：

【解决方案3】：

你也可以试试这个。这种方法对我有用。在您的vue.config.js 中添加：

css: {
 extract: false
}

【讨论】：

【解决方案4】：

就我而言，我执行了

npm 运行构建

来自 GIT bash 并遇到了问题。可能是由于文件路径大小写（上/下）问题。我切换回正常的命令行，它正在工作。

【讨论】：