如何为一个新的角度项目设置顺风？

Question

我想创建一个新的角度项目使用顺风CSS。我当前的CLI版本是10.1.1。到目前为止我做过的事情：

• 使用ng new my-app
创建新应用程序
• 使用角度路由=>是
• 使用SCSS作为样式表
• 在项目根目录中运行npm i tailwindcss postcss-import postcss-loader postcss-scss@angular-builders/custom-webpack-d
• 在src文件夹中有一个styles.scss文件，请将其修改为

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

null

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=>architect=>build
    • 将生成器更改为“builder”：“@angular-builders/custom-webpack：browser”,
    • 添加到选项

    .

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

    • 搜索关键项目=>my-app=>architect=>服务
      • 将生成器更改为“builder”：“@angular-builders/custom-webpack：dev-server”,
      • 添加到选项

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

      null

      /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：无效的options对象。PostCSS加载器已使用与API架构不匹配的options对象初始化。

      • 选项具有未知属性“plugins”。这些属性是有效的：object{PostCSSOptions？,Execute？,SourceMap？}在validate（/.../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加载器已使用与API架构不匹配的options对象初始化。

      • 同上文本

      如何正确设置顺风？

Answer 1

导入是“tailwindCSS”，而不是“tailwinding”：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';