时间戳

首页 > 解决方案 > 安装 Tailwind 后尝试运行 ng 时，Angular 模块构建失败

angular - 安装 Tailwind 后尝试运行 ng 时，Angular 模块构建失败

问题描述

安装@ngneat/tailwind后 尝试运行 `ng 时出现以下错误。我该如何解决 ？

这是我当前的角度版本：

角版

Angular CLI: 11.2.1
Node: 14.13.0
OS: win32 x64

Angular: 11.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      11.2.1
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript

错误

Error: ./src/styles.css
Module build failed (from ./node_modules/@angular-builders/custom-webpack/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-builders/custom-webpack/node_modules/postcss-loader/dist/cjs.js):
TypeError: getProcessedPlugins is not a function
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\tailwindcss\lib\processTailwindFeatures.js:75:83
    at LazyResult.runOnRoot (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss\lib\lazy-result.js:303:16)
    at LazyResult.runAsync (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss\lib\lazy-result.js:355:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.loader (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss-loader\dist\index.js:95:14)
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.loader (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss-loader\dist\index.js:104:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

包.json

{
  "name": "mapurbiz",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.1",
    "@angular/common": "~11.2.1",
    "@angular/compiler": "~11.2.1",
    "@angular/core": "~11.2.1",
    "@angular/forms": "~11.2.1",
    "@angular/platform-browser": "~11.2.1",
    "@angular/platform-browser-dynamic": "~11.2.1",
    "@angular/router": "~11.2.1",
    "@ngneat/tailwind": "^6.0.3",
    "@types/leaflet": "^1.5.23",
    "leaflet": "^1.7.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.0.0",
    "@angular-devkit/build-angular": "^0.1001.7",
    "@angular/cli": "~11.2.1",
    "@angular/compiler-cli": "~11.2.1",
    "@tailwindcss/aspect-ratio": "0.2.0",
    "@tailwindcss/forms": "0.2.1",
    "@tailwindcss/line-clamp": "0.2.0",
    "@tailwindcss/typography": "0.4.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "postcss-ng-tailwind-in-components": "0.0.3",
    "protractor": "~7.0.0",
    "tailwindcss": "2.0.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.5"
  }
}

标签： angular

解决方案

由于 PostCSS 7 兼容性构​​建的问题。从 v2.0 开始，Tailwind CSS 依赖于 PostCSS 8。因为 PostCSS 8 距离这个日期只有几个月的历史，生态系统中的许多其他工具还没有更新，这意味着您可能会在终端中看到类似这样的错误. 您可以在顺风官方网站上阅读有关此内容的信息。

或继续这里：

如果您遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

兼容性构建在各个方面都与主构建相同，因此您不会错过任何功能或类似的东西。

一旦您的其他工具添加了对 PostCSS 8 的支持，您就可以通过使用 latest 标签重新安装 Tailwind 及其对等依赖项来摆脱兼容性构建：

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

推荐阅读