webpack 中实现自动识别 CSS Modules
编者按:本文作者奇舞团前端开发工程师彭体奎
背景
在 React 项目中使用 CSS 时,如果不使用 CSS in JS 的方案,一般会直接在 JS 文件中导入一个 CSS 文件,比如 import './index.css',但这样 CSS 会在全局作用域内都有效,所以我们会使用 CSS Modules1 来解决作用域的问题,使用方法如下:
import styles from './index.css'; const App = () => (<div className={styles.App}>App</div> );
其原理就是将 CSS 文件中的每个 className 按照一定的规则映射为另一个唯一的字符串,以保证 className 在全局作用域内不会重复和冲突。配置方法也很简单,只需要在 webpack 的 css-loader 中添加一个 modules 配置项即可,具体请参考 css-loader 的文档2。
有时候我们需要使某个 CSS 文件全局有效,虽然 CSS Modules 也提供了全局有效的方案,但不如直接 import './foo.css' 来的爽快。在 Create React App 中提供了一种解决方案,以 .module.css 为后缀的文件会启用 CSS Modules,以 .css 为后缀的文件不启用,很多脚手架或工具也都采用了这种方案。
缘由
用后缀名区分的方案一直没觉得有什么不妥,只是文件名有点长,不够优雅。直到前几天看到 Umi3 发布了 3.0 版本,出于好奇随便翻了翻文档,发现了一个特别有意思的功能:
Umi 会自动识别 CSS Modules 的使用,你把他当做 CSS Modules 用时才是 CSS Modules。
这个功能很巧妙啊,符合直觉又简单易用。又是出于好奇,看了一下 Umi 的源码,探究一下这是怎么实现的。
实现
通过翻看 Umi 的源码发现,实现这个功能并不复杂,很简单巧妙。
我们可以看到是否使用 CSS Modules 时,两种导入方式不一样,所以我们可以通过 Babel 来将两者做一个区分。
Babel 的运行流程主要分三个阶段:
解析,将源码转成 AST(抽象语法树)
转换,对 AST 的节点进行增加、删除或修改
生成,将 AST 转回源码
Babel 插件工作在第二个阶段,根据需求访问不同类型的 AST 节点,并对其进行增删改。所以我们可以编写一个插件来识别两种导入方式,并添加标识以便 webpack 中进行区分。
具体如何编写一个 Babel 插件不在本文的讨论范围内,你可以查看文末的参考链接进行了解和学习。
我们先打开 AST explorer4 对比两种语句的 AST 的区别,两者的 AST 如下:
// import './index.css'; {"type": "Program","start": 0,"end": 21,"body": [{"type": "ImportDeclaration","start": 0,"end": 21,"specifiers": [],"source": {"type": "Literal","start": 7,"end": 20,"value": "./index.css","raw": "'./index.css'"}}],"sourceType": "module" }
// import styles from './index.css'; {"type": "Program","start": 0,"end": 33,"body": [{"type": "ImportDeclaration","start": 0,"end": 33,"specifiers": [{"type": "ImportDefaultSpecifier","start": 7,"end": 13,"local": {"type": "Identifier","start": 7,"end": 13,"name": "styles"}}],"source": {"type": "Literal","start": 19,"end": 32,"value": "./index.css","raw": "'./index.css'"}}],"sourceType": "module" }
很明显两者的 specifiers 字段是有区别的,那就可以通过这个字段和文件后缀名(毕竟不能处理非 CSS 文件)来识别,并对需要启用 CSS Modules 的 CSS 文件加一个 query 参数,不能直接修改文件名,不然后面 webpack 就找不到文件了,Babel 插件代码如下:
const { extname } = require('path'); const CSS_FILE_EXTENSIONS = ['.css', '.scss', '.sass', '.less']; module.exports = () => {return {visitor: {ImportDeclaration(path) {const { specifiers, source } = path.node;const { value } = source;if (specifiers.length > 0&& CSS_FILE_EXTENSIONS.includes(extname(value))) {source.value = `${value}?css_modules`;}},},}; };
我们通过这个插件访问 AST 中类型为 ImportDeclaration 的节点,判断该节点的 specifiers 不为空且文件后缀名为样式文件时,在文件名后面添加一个 ?css_modules query 参数。该参数用于后面在 webpack 中区分是否启用 CSS Modules。
在 Babel 配置文件中配置上该插件,然后开始配置 webpack 的 loader。我们在 webpack 配置的 modules.rules.oneOf 中添加了两条 CSS 相关的规则,两条规则的区别在于前者启用了 CSS Modules,并且规则里多了 resourceQuery 配置项,当匹配到第一条规则后就不会再向下匹配剩余的规则了。需要启用 CSS Modules 的 CSS 文件会匹配到第一条规则,不启用的会匹配到第二条。
因为 test 是用于匹配文件路径的,并不能匹配到路径 ? 后的参数,所以需要使用 resourceQuery 来匹配 query 参数。注意 resourceQuery 配置的值要和 Babel 插件中添加的参数保持一致。
简略的配置如下:
// webpack.config.js module.exports = {modules: {rules: {oneOf: [{test: /\.css$/,resourceQuery: /css_modules/,loader: 'css-loader',options: {modules: true,},},{test: /\.css$/,loader: 'css-loader',},],},}, };
Less 和 Sass 等的配置同理,多加一个相关的 loader 即可。
这样就实现了自动识别 CSS Modules 的功能,实现难度不大,但很巧妙很实用。
如果想在你的项目中使用这个 Babel 插件,可以直接安装 Umi 已经发布到 npm 的 @umijs/babel-plugin-auto-css-modules5,它可以通过 flag 配置项自定义 query 参数。
参考
Umi 中 Babel 插件的源码:https://github.com/umijs/umi/tree/master/packages/babel-plugin-auto-css-modules
如何创建 Babel 插件:https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md
AST explorer:https://astexplorer.net/
css-loader 中配置 CSS Modules:https://github.com/webpack-contrib/css-loader#modules
CSS Modules 文档:https://github.com/css-modules/css-modules
webpack loader 配置:https://webpack.js.org/configuration/module/#rule
Create React App 中的 CSS Modules:https://create-react-app.dev/docs/adding-a-css-modules-stylesheet
Umi 3 的介绍:https://github.com/sorrycc/blog/issues/92
文内链接
https://github.com/css-modules/css-modules
https://github.com/webpack-contrib/css-loader#modules
https://umijs.org/
https://astexplorer.net/
https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules !--@umijs/babel-plugin-auto-css-modules--
关于奇舞周刊
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。
webpack 中实现自动识别 CSS Modules相关推荐
- webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
- webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中? - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...
- less和sass支持 css modules 一样的局部环境和使用方式,解决重名样式覆盖的问题
安装 npm install --save-dev node-sass sass-loader css-loader: css-loader 会对 @import 和 url() 进行处理,就像 js ...
- css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
- React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...
- 在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
- webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀 前言 在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- web项目html引入css文件路径,详解Webpack和Webpack-simple中如何引入CSS文件_旧店_前端开发者...
博主最近研究 首先说一下如何在webpack中引入 之后在App.vue文件中在style标签项目写入你想要引入的样式: 本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即 ...
最新文章
- 惠普鼠标g260_惠普g260鼠标怎么样 惠普鼠标怎么样?
- “电梯演讲”最精炼、贴切的语言
- 有线同步--ASP007
- SAP WebClient UI删除搜索条件的后台处理,以及max hit的处理逻辑
- bp神经网络预测未来五年数据_基于小波神经网络的数据中心KPI预测
- Attention Model详解
- 竞赛经验——全国大学生创新创业训练计划(国创)
- h5制作导出html,H5制作工具Hype的导出功能详解
- 【转载】Web前端框架图
- centos linux7 开启桌面命令,centos7如何在桌面打开终端
- java实现pdf的拆分和合并
- Android端的新浪微博论文,android新浪微博客户端开发毕业论文.doc
- linux每日命令(3):ln命令
- python购买股票_Python|买卖股票的最佳时机
- golang: 密码中允许出现数字、大写字母、小写字母、特殊字符,但至少包含其中2种且长度在8-16之间(四种符号任意满足三种即可)
- ChatAI==ChatGPT(无需翻墙同等使用chat)
- U盘制作-BGA焊接练习
- ls -al 命令详解
- 51单片机 花样流水灯程序
- arduino控制红外避障传感器
热门文章
- Cyclic Rotation
- NZT在线源安装教程
- 10个小方法锻炼你的大脑
- ZFNet论文笔记--卷积可视化
- UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xc1 in position 41694: invalid start byte解决方案
- YGBOOK小说系统6.14商业版常见问题汇总
- 使用adb录制手机屏幕视频
- Java 微信公众登录
- lisp 圆柱螺旋线_Auto LISP对AutoCAD2002进行二次开发实例——绘制二维函数曲线
- 【智能优化算法】基于融合莱维飞行与黄金正弦的蚁狮算法求解单目标优化问题matlab代码