首页 > 解决方案 > 无法在我的 Angular 项目中安装 tailwind css

问题描述

首先,我正在关注本指南(以及其他指南):https ://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab

我一直试图在我的角度项目中安装顺风,但没有成功。除此之外,我什至从 0 开始创建了一个 Angular 项目来尝试进行基本安装,但我也无法做到。

我已经完成了本快速指南中出现的所有配置,包括更改自定义 webpack 构建器的应用程序构建器和 angular.json 配置。

ng serve 上的当前错误: 在此处输入图像描述

对 package.json 的依赖:

"dependencies": {
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular/animations": "~9.0.1",
    "@angular/cli": "^9.1.12",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^4.0.2",
    "postcss-scss": "^2.1.1",
    "protractor": "~5.4.3",
    "tailwindcss": "^1.8.10",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }

标签: angularwebpacktailwind-css

解决方案


最后我解决了降级postcss-loader。似乎它不适用于 4.0 版本,我不得不手动输入 3.0:

npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

我希望它对你有所帮助。角度和顺风环境中的某些配置可能仍然失败,如果有人需要任何其他配置的帮助,请随时与我联系


推荐阅读