如何为新的 Angular 项目设置 Tailwind? [英] How to setup Tailwind for a new Angular project?

问题描述

我想使用 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 运行应用

      我收到此错误

      ./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 不匹配的选项对象进行初始化模式.

      ERROR in ./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) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

      • 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)

      模块构建中的错误失败(来自./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: Invalid options object. PostCSS Loader has been initialized using an options object 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！