如何为新的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

.

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 文件
  • 搜索关键项目=>my-app =>建筑师=>建造
    • 将构建器更改为"builder":"@ angular-builders/custom-webpack:browser"，
    • 添加到选项

    .

    "customWebpackConfig": {
        "path": "./webpack.config.js"
    },
    

    • 搜索关键项目=>my-app =>建筑师=>服务
      • 将构建器更改为"builder":"@ angular-builders/custom-webpack:dev-server"，
      • 添加到选项

      .

      "customWebpackConfig": {
          "path": "./webpack.config.js"
      },
      

      • 使用 ng serve 从应用程序的根目录运行应用程序
      • Run the app with ng serve from the app's root directory

      我遇到此错误

      ./src/styles.scss中的错误(./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src ??嵌入！./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.jspostcss！./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具有未知的属性"plugins".这些属性是有效的: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:无效选项对象.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屋！