为啥 Tailwind 中的清除选项不能与 Webpack 一起使用

Posted 2023-03-07

【中文标题】为啥 Tailwind 中的清除选项不能与 Webpack 一起使用

【英文标题】：Why is Purge Option in Tailwind not working with Webpack为什么 Tailwind 中的清除选项不能与 Webpack 一起使用

【发布时间】：2021-06-13 19:17:44

【问题描述】：

我使用 Tailwind 设置了 Webpack，除了清除之外，一切似乎都运行良好。该文件为 4mb，我可以在其中看到所有的 tailwind 实用程序类。在过去的 30 分钟里，我试图找到解决方案，但没有任何效果。

这是我的 package.json 脚本“构建”和所有依赖项：

 "name": "MemeGenerator",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": 
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --config webpack.prod.js",
   "watch": "webpack --watch --config webpack.dev.js"
 ,
 "repository": 
   "type": "git",
   "url": "git+https://github.com/MB9900/MemeGenerator.git"
 ,
 "keywords": [],
 "author": "",
 "license": "ISC",
 "bugs": 
   "url": "https://github.com/MB9900/MemeGenerator/issues"
 ,
 "homepage": "https://github.com/MB9900/MemeGenerator#readme",
 "devDependencies": 
   "autoprefixer": "^10.2.5",
   "css-loader": "^5.1.3",
   "html-webpack-plugin": "^5.3.1",
   "postcss": "^8.2.8",
   "postcss-cli": "^8.3.1",
   "postcss-loader": "^5.2.0",
   "style-loader": "^2.0.0",
   "tailwindcss": "^2.0.3",
   "webpack": "^5.26.0",
   "webpack-cli": "^4.5.0",
   "webpack-dev-server": "^3.11.2",
   "webpack-merge": "^5.7.3"
 

这里是 webpack.common

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
    entry: './src/js/app.js',
    output: 
        path: path.resolve(__dirname, 'dist'),
        clean: true
    ,
    module: 
        rules: [
            
                test: /\.css$/i,
                include: path.resolve(__dirname, 'src/css'),
                use: ['style-loader', 'css-loader', 'postcss-loader']
            
        ]
    
;

这里是 webpack.prod.js

const  merge  = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = merge(common, 
    mode: 'production',
    output: 
        filename: '[name].[contenthash].js',
    ,
    plugins: [
        new HtmlWebpackPlugin(
            filename: 'index.[contenthash].html',
            template: 'src/html/index.html'
        )
    ],
);

这里是 postcss.config.js

module.exports = 
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
;

最后：tailwind.config.js

module.exports = 
    purge: 
        enable: true,
        content: [
            './src/**/*.html',
            './src/**/*.js'
        ]
    ,
    darkMode: false,
    theme: 
      extend: ,
    ,
    variants: 
    extend: ,
    ,
    plugins: [],
  ;

【参考方案1】：

使用 webpack 确保您还强制将 mode 选项设置为生产

webpack --config webpack.prod.js  --mode=production --progress

【参考方案2】：

似乎“NODE_ENV”未设置为“生产”。我尝试在 tailwind.config.js 中使用“enable: true”修复此问题，但它是 enabled: true。现在它工作正常。

【讨论】：

救命稻草！将其添加到构建命令使其工作。 "build": "NODE_ENV=production webpack --config webpack.prod.js",

我花了 4 个小时在网上到处冲浪，最后 enabled 和 ed 解决了这个问题。非常感谢！