css - 使用 Angular 8 + Tailwind.css + LESS 进行缓慢的 Webpack 编译

标签 css angular webpack postcss tailwind-css

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

当它卡住时我看到这条消息: 51% 正在构建 342/343 个模块 1 个事件 ...e_modules\postcss-loader\src\index.js??postcss!C:\XXXXXXXXXXXXXXXXXXXXXXXX\src\styles.less

在 styles.less 文件中，我有所需的 tailwind 导入:

@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 可以稍微减慢速度。非常感谢任何提示

最佳答案

您不需要将预处理器与 Tailwind CSS 一起使用。

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

因为:

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

关于css - 使用 Angular 8 + Tailwind.css + LESS 进行缓慢的 Webpack 编译，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59747891/