Webpack打包TailwindCSS样式丢失？试试raw-loader加载HTML文件的解决方案

Webpack打包时，使用raw-loader加载HTML文件后，Tailwind CSS样式常常丢失。本文针对此问题，分析了其根本原因：raw-loader仅读取文件内容，Webpack无法处理其中的CSS类名。解决方案是修改Tailwind CSS配置文件(tailwind.config.js)，利用`purge`选项指定需要扫描的HTML文件路径（例如`src/*.html`），从而让Tailwind正确提取并包含这些文件中的Tailwind CSS类名，最终解决样式缺失问题。本文详细介绍了问题描述、解决方案及代码示例，助你快速解决Webpack打包Tailwind CSS样式丢失的难题。

Webpack打包Tailwind CSS样式缺失：raw-loader与解决方案

使用Webpack构建项目时，经常遇到Tailwind CSS样式在HTML文件中缺失的问题。本文分析一个案例：使用raw-loader加载HTML文件后，Tailwind CSS样式无法被Webpack正确打包。

问题描述：

项目中使用raw-loader加载包含Tailwind CSS类名的HTML文件（例如header.html），并将其插入主HTML文件（index.html）。Webpack打包后，header.html中的Tailwind CSS样式未生效，被视为普通文本。

index.html代码片段示例：

<div class="w-full h-6 bg_color text-white leading-1">
  <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yhZp5soaiv6q7aIN2eJW-iJyUkqetsYaYepqvnJtotI2gnH2znaKy3bSkgomEl72unKE' rel='nofollow'>公告公告</a>
</div>

Webpack配置文件（部分）：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // ...其他配置...
  module: {
    rules: [
      // ...其他规则...
    ],
  },
  // ...其他配置...
};

问题根源在于Webpack默认不处理raw-loader加载的HTML文件中的CSS类名。raw-loader仅读取文件内容为字符串，不进行解析。

解决方案：

修改Tailwind CSS配置文件 (tailwind.config.js) ，让Tailwind扫描并处理raw-loader加载的HTML文件。

修改后的tailwind.config.js：

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

purge 选项至关重要。通过添加 src/*.html 和 src/base/*.html (请确保路径正确指向你的header.html文件)，告知Tailwind扫描这些目录下的HTML文件，提取并包含其中的Tailwind CSS类名。Webpack打包后，header.html中的Tailwind CSS样式将被正确包含到最终的CSS文件中。

通过以上调整，即可解决Webpack打包时Tailwind CSS样式在raw-loader加载的HTML文件中缺失的问题。

本篇关于《Webpack打包TailwindCSS样式丢失？试试raw-loader加载HTML文件的解决方案》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！