在 Babel 下使用 CSS Modules 时，你可能会遇到一个 hash 编号问题，这会导致你的样式无法正确地被加载。此问题的解决方法可以通过以下步骤实现。
步骤一：在 Babel 下设置 CSS Modules
首先，你需要在 Babel 中启用 CSS Modules。你可以在你的 .babelrc 文件中添加以下代码：
-
---------- -
------------------------------------- - ---------- ----- ---
----------------------------------- - --------- - ---
------------------------------------------- - -------- ---- ---
---------------------------------- -
--------------------- ---------------------------
--
-
-上述代码将使用 babel-plugin-react-css-modules 插件来启用 CSS Modules，并使用 generateScopedName 选项来控制生成的类名的格式。在这里，我们将类名设置为本地名称和哈希的组合。
步骤二：解决样式无法正确加载的问题
在将 CSS Modules 与 Babel 结合使用时，你可能会遇到一个问题，即经过编译后，你的样式可能无法正确地加载。这是因为样式文件中的哈希编号可能会被修改，从而使生成的类名与实际使用的类名不匹配。
要解决这个问题，你可以在 webpack 配置中添加以下代码：
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -
--------------- ---------------------------
-
-
--
----------------
-
-在这里，我们将类名设置为本地名称和哈希的组合。这样，在编译样式文件时，webpack 将使用相同的哈希编号，从而确保生成的类名与实际使用的类名匹配。
示例代码：
------ ----- ---- --------
------ ------ ---- ---------------
----- ---- - -- -- -
---- ------------------------
---- -- - --- ------- -----
------
--上述代码演示了如何在 React 中使用 CSS Modules。请注意，我们可以通过导入样式文件并使用样式对象中的类来引用样式。
结论
使用 CSS Modules 可以帮助你避免在前端代码中出现命名冲突或者无法正确加载样式的问题。通过在 Babel 中设置 CSS Modules，你可以在编译代码时控制生成的类名的格式，并确保在编译样式文件时使用相同的哈希编号。这将有助于提高你的代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672affdbddd3a70eb6d1551e