webpack tailwindcss raw-loader 后样式无法被打包？

Question

  <div class="w-full h-6 bg_color text-white leading-1">
    <a href="">公告公告</a>
  </div>

  <%= require('raw-loader!./base/header.html').default %>

这个代码是index.html 的代码，其中引入了header.html 文件，这个header.html 里面也是包含tailwindcss 的类名，但是使用webpack 打包的时候，是不会被打包进去的，这里应该是被当做 字符串处理了。

webpack config配置

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/ts/index.ts",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./js/[name].js",
    assetModuleFilename: "./imgs/[name][ext][query]",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/style.css",
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
      chunks: ["index"],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          "sass-loader",
          "postcss-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|gif|webp)$/,
        type: "asset/resource",
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  mode: "production",
  devServer: {
    client: {
      overlay: false,
      logging: "none",
    },
    open: true,
    hot: true,
    port: 9000,
  },
};

请问:
webpack 如何将raw-loader 引入的文件里面的tailwindscss 也一起打包到新的css文件中！

Answer 1

如果要解析,非入口文件的html css 或者其他文件。可以在 tailwind.config.js 中配置

module.exports = {
    purge: ['src/*.html','src/base/*.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

这个叫 purge 的配置项就可以配置其他的文件