如何用angular，ng-zorro-antd和更少的配置Tailwind CSS？

问题描述

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

我遇到错误：

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。

有什么办法解决这个问题吗？

解决方法

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

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

我也开始将less-loader添加到项目中。我认为减少加载程序是必要的，因为如果仅运行少过postcss的脚本，那将是不够的。他们不一样。

npm install less less-loader --save-dev

这就是它的外观。较少的javascriptEnabled选项是从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分钟，请看屏幕截图上的五十万毫秒。不知道为什么花了这么长时间。您找到其他更好的解决方案了吗？

,

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

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

基本上，解决方案是让angular处理scss并减少样式，您的额外自定义webpack只需要处理顺风的scss格式。