webpack 中实现自动识别 CSS Modules

最新推荐文章于 2024-03-25 09:50:24 发布

奇舞周刊

最新推荐文章于 2024-03-25 09:50:24 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/104809769

版权

本文介绍了如何在Webpack中自动识别CSS Modules，以避免手动配置。通过编写Babel插件和调整Webpack配置，可以使得以.module.css为后缀的文件启用CSS Modules，而普通.css文件则不启用。Babel插件通过分析AST来区分导入方式，Webpack则利用resourceQuery匹配启用CSS Modules的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编者按：本文作者奇舞团前端开发工程师彭体奎

背景

在 React 项目中使用 CSS 时，如果不使用 CSS in JS 的方案，一般会直接在 JS 文件中导入一个 CSS 文件，比如 import './index.css'，但这样 CSS 会在全局作用域内都有效，所以我们会使用 CSS Modules¹ 来解决作用域的问题，使用方法如下：

import styles from './index.css';
const App = () => (
  <div className={styles.App}>App</div>
);

其原理就是将 CSS 文件中的每个 className 按照一定的规则映射为另一个唯一的字符串，以保证 className 在全局作用域内不会重复和冲突。配置方法也很简单，只需要在 webpack 的 css-loader 中添加一个 modules 配置项即可，具体请参考 css-loader 的文档²。

有时候我们需要使某个 CSS 文件全局有效，虽然 CSS Modules 也提供了全局有效的方案，但不如直接 import './foo.css' 来的爽快。在 Create React App 中提供了一种解决方案，以 .module.css 为后缀的文件会启用 CSS Modules，以 .css 为后缀的文件不启用，很多脚手架或工具也都采用了这种方案。