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

【问题标题】：Slow Webpack compilation with Angular 8 + Tailwind.css + LESS使用 Angular 8 + Tailwind.css + LESS 进行慢速 Webpack 编译
【发布时间】：2020-05-02 00:17:32
【问题描述】：

我目前正在将 Tailwind.css 与最初使用 LESS 设置的 Angular 8 站点一起使用。我已经关注this post，它会引导您完成使用 SASS 时的设置过程，并且只是更改了引用以匹配 LESS 的引用。这可以正常工作，并且 Tailwind 样式显示正确，但我注意到在编辑 tailwind.config.js 后（超过一分钟左右），初始编译时间和编译时间明显变慢。

我在卡住时看到此消息： 51% building 342/343 modules 1 active ...e_modules\postcss-loader\src\index.js??postcss!C:\XXXXXXXXXXXXXXXXXXXXXXXX\src\styles.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 可以让事情慢一点。非常感谢任何提示

【问题讨论】：

您好，您是否为 less 和 tailwindcss 找到了一个好的设置，我在导入时遇到了问题，并且您说的编译非常慢。stackoverflow.com/questions/63639695/…
最后，我只使用了我发现的许多设置博客文章中的一篇（例如dev.to/seankerwin/angular-8-tailwind-css-guide-3m45）。第一次构建速度很慢，但我发现增量构建速度是可以容忍的。祝你好运！
感谢您的回复，由于某种原因，我在解决此项目中的导入时遇到错误。

标签： css angular webpack postcss tailwind-css

【解决方案1】：

您无需对 Tailwind CSS 使用预处理器。

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

因为：

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

【讨论】：