Tailwindcss 2 样式在 Angular 11 中不起作用

Question

我正在一个新的 Angular 11 项目中尝试 Tailwindcss。我安装了以下开发包。

NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.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')
            ]
          }
        }
      }
    ]
  }
}

样式.scss

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

角度.json

"builder": "@angular-builders/custom-webpack:browser", //dev-server
"customWebpackConfig": { "path": "webpack.config.js" }

我添加了这段代码app.component.html，但它似乎无法识别样式。

...... some codes not included
<div class="px-6 pb-4 space-x-2">
    <a href="https://angular.io" target="_blank" rel="noreferrer"
      class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700">
      #angular
    </a>
    <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
      class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700">
      #tailwind
    </a>
    <a href="https://notiz.dev" target="_blank" rel="noreferrer"
      class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400">
      #notiz
    </a>
  </div>

Answer 1

您可以更新到测试版 @angular-builders/custom-webpack。它在你的angular.json中有新的变化， customWebpackConfig部分现在应该像这样

 "customWebpackConfig": {
      "path": "./webpack.config.js",
      "mergeRules": {
           "module": {
              "rules": "append"
            }
      }
  }

你的加载器的 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
              }
            }
          }
        ]
      }
    ]
  }
};

您可以在Angular-builders上阅读有关此内容的更多信息

还有您需要的包

• “postcss”：“^8.2.1”
• “postcss-导入”：“^14.0.0”
• “postcss-loader”：“^4.1.0”
• “postcss-scss”：“^3.0.4”
• “tailwindcss”：“^2.0.2”
• “自动前缀”：“^10.1.0”
• “@angular-builders/custom-webpack”：“^11.0.0-beta.4”