使用 Angular 8 + Tailwind.css + LESS 进行慢速 Webpack 编译

Question

我目前正在使用Tailwind.css，最初使用LESS设置的Angular 8站点。 我关注了这篇文章，它引导您完成使用 SASS 时的设置过程，并更改了引用以匹配 LESS 的引用。这有效并且 Tailwind 样式显示正确，但我注意到编辑tailwind.config.js后的初始编译时间和编译时间明显变慢(超过一分钟左右(。

当它卡住时，我看到这条消息： 51% building 342/343 modules 1 active ...e_modulespostcss-loadersrcindex.js??postcss!C:XXXXXXXXXXXXXXXXXXXXXXXXsrcstyles.less

在styles.less文件中，我有所需的顺风导入：

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

我的 webpack 配置是：

module.exports = {
module: {
rules: [
{
test: /.less$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-less',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
}
]
}
};

这是意料之中的吗？感觉我可能做错了什么，我在搜索中读到了一些东西，说post-css可以稍微减慢速度。任何提示非常感谢

Answer 1

你不需要在 Tailwind CSS 中使用预处理器。

这不是一个好主意，但如果你愿意，你可以。

因为：

https://tailwindcss.com/docs/using-with-preprocessors/