javascript - 将 Tailwind 2 与 Angular 11 一起使用的确切解决方案是什么？我只是厌倦了寻找合适的解决方案。没有什么真正有效

Question

在过去的几周里，我尝试了很多。我浪费了太多时间来弄清楚。但是，我找不到解决方案。请帮我。

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(customWebpackConfig).

这是我现在面临的错误。

我已经正确导入了 Tailwind。

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

这是package.json. 我试过降级postcss，postcss-loader。没有任何效果。

"dependencies": {
    "@angular-builders/custom-webpack": "^11.0.0-beta.4",
    "autoprefixer": "^10.1.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-scss": "^3.0.4",
    "sass": "^1.27.0",
    "tailwindcss": "^2.0.2",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
  }

这是webpack.config.js文件

let sass;
try {
  sass = require('node-sass');
} catch {
  sass = require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  "postcss-import",
                  "tailwindcss",
                  "autoprefixer"
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};

标签： javascriptangularwebpacksasstailwind-css