如何使用angular、ng-zorro-antd和less配置Tailwind css？

Question

我正在尝试使用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构建的示例project-repo，并添加了ng-zorro-antd @nartc/tailwind-schematics schematics。

你知道怎么解决这个问题吗？

Answer 1

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

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

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

npm install less less-loader --save-dev

看起来就是这样。javascriptEnabled从蚂蚁身上获得的选择就越少。

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,
              },
            },
          },
        ],
      },
    ],
  },
};

它经历了but过程，但几乎花了10分钟，请看屏幕截图上的50万毫秒。不知道为什么花了这么长时间。你找到另一个更好的解决方案了吗？

​

​

Answer 2

作为另一种选择，您可以在您的angular项目中使用scss，而更少的仅用于ng-zorro主题样式。然后在angular.json中包含styles.scss和theme.less文件。

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

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