javascript - 如何为新的 Angular 项目设置 Tailwind？

Question

我想使用 Tailwind CSS 创建一个新的 Angular 项目。我当前的 CLI 版本是 10.1.1。到目前为止我做过的事情:

使用 ng new my-app 创建一个新应用程序

使用 Angular 路由 => 是

使用 SCSS 作为样式表

在项目根目录下运行npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D

在 src 文件夹中有一个 样式.scss 文件，修改为

.

@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 运行应用程序从应用程序的根目录

我收到此错误

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 beeninitialized using an options object that does not match the APIschema.

• options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }at validate (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11)at Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)

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.

• same text as above

如何正确设置 Tailwind？

Answer 1

今天到处乱撞后我找到了答案，将您的 webpack.config.js 更改为，

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

有一个小的变化，插件现在采用数组而不是函数。
提前谢谢😉。

如果还有人遇到问题，请查看我在 Angular 10 + Tailwind CSS 上写的这篇博客👇
https://fullyunderstood.com/get-started-with-angular-tailwind-css/