问题描述
在使用 Webpack 打包前端项目时，经常会遇到 CSS 样式失效的问题。这种情况多出现在使用 CSS 预处理器（如 Sass、Less、Stylus 等）和 CSS 模块化（如 CSS Modules 等）的情况下。一般表现为页面没有任何样式或样式只能部分生效。
这是因为在打包过程中，Webpack 会将所有的 CSS 文件合并为一个文件，其中可能存在样式冲突或覆盖的情况。而且，由于 Webpack 打包后的 CSS 文件会对类名进行哈希处理，因此对应的 CSS 规则与 HTML 中的类名不一致，导致样式失效的情况。
解决方法
1. 提取 CSS 到单独的文件
通过使用 mini-css-extract-plugin 插件，可以将打包后的 CSS 文件提取到单独的文件中，避免了打包后的样式覆盖问题。该插件的使用方法如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
---
------- -
------ -
-
----- ---------
---- -
----------------------------
-------------
-- -- --- --- ------
-
--
-- ------- ------ --
-
--
-------- -
--- ----------------------
-- ------------- --- ---
-- --- ---------------------- --------- ------------------------ --
-
--这样就可以在打包结束后生成相应的 CSS 文件，可以通过 HTML 文件引入使用。
2. 使用 CSS Modules
CSS Modules 是一种 CSS 模块化的解决方案，可以避免样式冲突和覆盖的问题，并且可以方便地进行组件化开发。CSS Modules 通过自动转换类名来解决哈希处理导致的样式失效问题。在 Webpack 中使用 CSS Modules 需要进行如下配置：
-- -------------------- ---- -------
-------------- - -
---
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- ----- -- -- --- ------- --
-------------- -- -- -- ------ --- --- ---- -------------------- -
--------------- ------------------------ -- ----------
-
--
-- -- --- --- ------
-
--
-- ------- ------ --
-
--
---
--在使用 CSS Modules 的情况下，我们需要在组件中使用类名映射的方式来定义CSS 样式。例如：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ------ ---- ---------------------
------ ------- -------- ------------- -
------ -
---- ---------------------------
--- ------------------------------- -----------
-- ----------------------------------------
------
--
-在 CSS 样式文件中，可以导出一个对象，该对象中的键名就是经过转换后的类名，值为字符串格式的样式。
-- -------------------- ---- ------- -- ---------------- -- -------- - ------- --- ----- ----- -------- ----- - ------ - ---------- ----- ------ ----- - -------- - ---------- ----- ------ ----- -
这样，通过 CSS Modules 就可以避免哈希处理导致的类名不一致问题。
总结
通过提取 CSS 以及使用 CSS Modules 的方式，可以解决 Webpack 打包过程中 CSS 样式失效的问题，避免样式冲突和覆盖。同时，CSS Modules 还可以提高项目的可维护性和可读性，适合进行组件化开发。通过这些解决方法，我们可以更加高效、稳定地开发前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460c11a968c7c53b02622c8