如何使用 angular、ng-zorro-antd 等配置 Tailwind css？答案

【问题标题】：How to configure Tailwind css with angular, ng-zorro-antd, and less?如何使用 angular、ng-zorro-antd 等配置 Tailwind css？
【发布时间】：2020-12-17 17:40:52
【问题描述】：

我正在尝试使用ng-zorro-antd 和less 将Taiwind CSS 集成到Angular 项目中。

我遇到了一个错误：

ERROR in ./src/styles.less (./node_modules/css-loader/dist/cjs.js??ref--15-1!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./node_modules/postcss-loader/src??postcss!./src/styles.less)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find './themes/index'
  in [
    /Users/iguissouma/idea/test-ant-less-tailwind/node_modules/ng-zorro-antd/style
  ]
    at resolveModule.catch.catch (/Users/iguissouma/idea/test-ant-less-tailwind/node_modules/postcss-import/lib/resolve-id.js:35:13)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

使用angular-cli 构建并添加ng-zorro-antd @nartc/tailwind-schematics 原理图的示例project-repo。

知道如何解决这个问题吗？

【问题讨论】：

请看看那个 repo 也许你觉得它有用 - github.com/trungk18/jira-clone-angular
你试过使用 ng-tailwind 吗？ npmjs.com/package/ng-tailwindcss
@Stefan 我受到这个项目 jira-clone-angular 的启发，但它使用纯 css 而不是更少。
@BrunoCerecetto 我使用了@nartc/tailwind-schematics，它提供了一个应该可以工作但少了一些麻烦的集成。
总的来说，我对顺风和scss + angular-material也有问题。由于构建失败，我无法在样式文件中创建任何 @import。

标签： angular webpack less tailwind-css ng-zorro-antd

【解决方案1】：

感谢您提及我的 jira 克隆项目！你是对的，我只在 Jira 克隆中从 ng-zorro 导入 CSS，但我使用 SCSS 语法编写的新样式。我记得我还必须在 webpack 配置中 include sass-loader 才能工作。

我下载了你的源代码，遇到了完全相同的问题。

我也开始将less-loader 添加到项目中。我认为 less loader 是必要的，因为如果你只运行 postcss-less，那是不够的。它们不一样。

npm install less less-loader --save-dev

看起来就是这样。 javascriptEnabled 的 less 选项来自 ant 的一个问题。

https://github.com/ant-design/ant-motion/issues/44

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              syntax: "postcss-less",
              plugins: () => [
                require("postcss-import"),
                require("tailwindcss")("./tailwind.config.js"),
                require("autoprefixer"),
              ],
            },
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

它经历了 buld 过程，但花了将近 10 分钟，请参阅屏幕截图上的 50 万毫秒。不知道为什么花了这么长时间。您是否找到了其他更好的解决方案？

【讨论】：

感谢您的回复，经过一番研究，我也提供了一个像您一样的 webpack.conf.js（使用 javascriptEnabled: true），但是构建非常缓慢，并且有时会挂起，以及何时这是成功，不知何故顺风行不通。
你如何导入顺风？ [at]import 'tailwindcss/base';不工作-> tailwind/node_modules/tailwindcss/base.less 不存在所以我使用 [at]import 'tailwindcss/base.css';但编译挂起
我使用了与您在存储库中通过普通导入“tailwindcss/base”提供的相同的更少文件。也许最简单的方法是附加一个扩展名 .css，例如 import "tailwindcss/base.css"。我会测试一下并告诉你
还是挂了?这个问题我悬赏一下

【解决方案2】：

作为替代方案，您可以在 Angular 项目中使用 scss，而更少仅用于 ng-zorro 主题样式。然后在 angular.json 中包含 styles.scss 和 theme.less 文件。

在styles.scss 文件中添加这些顺风，并拥有与@trungk18 的jira 克隆项目完全相同的webpack.config.js。

基本上，解决方案是让 angular 处理 scss 和 less 样式，而您额外的自定义 webpack 只需要处理 tailwind 的 scss 格式。

【讨论】：