问题描述
我想使用 Tailwind CSS 创建一个新的 Angular 项目.我当前的 CLI 版本是 10.1.1.到目前为止我做过的事情:
I want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far:
- 使用
ng new my-app
创建一个新应用 - 使用 Angular 路由 =>是的
- 使用 SCSS 作为样式表
- 在项目根目录运行
npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
- src文件夹中有一个styles.scss文件,修改为
- Create a new app using
ng new my-app
- Use Angular routing => yes
- Use SCSS as the stylesheet
- In the root directory of the project run
npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
- In the src folder there is a styles.scss file, modify it to
.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- 在项目根目录运行
npx tailwind init
- 在项目根目录新建一个webpack.config.js文件,内容如下
- In the root directory of the project run
npx tailwind init
- In the root directory of the project create a new file webpack.config.js with the following content
.
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: "postcss-loader",
options: {
ident: "postcss",
syntax: "postcss-scss",
plugins: () => [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
},
},
],
},
};
- 在根目录中有一个 Angular.json 文件
- 搜索重点项目=>我的应用程序 =>建筑师 =>建造
- 将构建器更改为
builder":@angular-builders/custom-webpack:browser",
- 添加到选项
.
"customWebpackConfig": { "path": "./webpack.config.js" },
- 搜索重点项目=>我的应用程序 =>建筑师 =>服务
- 将构建器更改为
builder":@angular-builders/custom-webpack:dev-server",
- 添加到选项
.
"customWebpackConfig": { "path": "./webpack.config.js" },
- 使用应用根目录中的
ng serve
运行应用 - options 有一个未知的属性插件".这些属性是有效的: object { postcssOptions?, execute?, sourceMap?}在验证 (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11)在 Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)
- 与上面相同的文本
我收到此错误
./src/styles.scss 中的错误(./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss)模块构建失败(来自 ./node_modules/postcss-loader/dist/cjs.js):ValidationError: 无效的选项对象.PostCSS Loader 已经使用与 API 不匹配的选项对象进行初始化模式.
模块构建中的错误失败(来自./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid选项对象.PostCSS Loader 已使用选项初始化与 API 架构不匹配的对象.
ERROR in Module build failed (from./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalidoptions object. PostCSS Loader has been initialized using an optionsobject that does not match the API schema.
如何正确设置 Tailwind?
How can I setup Tailwind correctly?
推荐答案
导入是 'tailwindcss',而不是 'tailwind':
Imports are 'tailwindcss', not 'tailwind':
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
这篇关于如何为新的 Angular 项目设置 Tailwind?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
- 将构建器更改为
- 将构建器更改为
- 搜索重点项目=>我的应用程序 =>建筑师 =>建造