Webpack + postcss 不清除 Tailwind

问题描述

我正在尝试使用 webpack 5 和 tailwind 2。日志表明大多数设置都正确，但没有进行清除。

我跑 NODE_ENV=production webpack --config webpack.prod.js

我有以下 webpack 配置

 mode: 'production',module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,use: ['style-loader','css-loader',{
                    loader: "postcss-loader",options: {
                        postcssOptions: {
                            plugins: [
                                require("tailwindcss")("./tailwind.config.js"),require("autoprefixer"),],},}
                },"sass-loader"],}

tailwind.config.js

module.exports = {
    purge: {
        mode: 'layers',layers: [],content: ['./src/*.elm','./src/**/*.elm'],theme: {
        extend: {}
    },variants: {},plugins: []
};

我的生产版本仍然产生 4mb 的包，这告诉我没有进行清除。我想我之前很挣扎并转而将选项放在单独的 postcss.config.js 中，但这并不总是必要的？

在命令行日志中我看到

cacheable modules 4.14 MiB (javascript) 7.64 KiB (asset)
modules by path ./src/ 4.13 MiB (javascript) 7.64 KiB (asset)
modules by path ./src/*.scss 1.34 KiB
  ./src/styles.scss 439 bytes [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss 930 bytes [built] [code generated]
./src/index.js + 1 modules 754 bytes [built] [code generated]
./src/Main.elm 159 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/tailwind.css 3.98 MiB [built] [code generated]

解决方法

试试这个：

module.exports = {
    purge: {
        mode: 'layers',enabled: true,// This fixed it for me
        layers: [],content: ['./src/*.elm','./src/**/*.elm'],},theme: {
        extend: {}
    },variants: {},plugins: []
};