使用 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_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會減慢速度。 任何提示非常感謝

Answer 1

您不需要在 Tailwind CSS 中使用預處理器。

這不是個好主意，但如果你願意，你可以。

因為：

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