怎么配置webpack可以像umi里那样 根据less引入的方式 决定是否使用css module?

依然在路上依然在路上 · 2021-12-17 00:04
最近在尝试搭建一个项目模板, 团队里喜欢和不喜欢css module的人都有 喜欢的人又不想在文件名上加.module.嫌麻烦 umi里根据引入的方式不同就可以决定是否使用css module很好 大佬真心求教😁
1 个回答
陈成
陈成
阿里 & 蚂蚁 10 年 + 老前端,ZJU,P8,Umi & Dva 等开源库作者,蚂蚁中台框架 Owner。
先看使用, // css modules import styles from './foo.less'; // none css modules import './foo.less'; 实现分两步, 1、webpack 层配置带 ?modules 的为 css modules,参考 https://github.com/umijs/umi-next/blob/4b031037c277dea7edadac686c67ccb20b017677/packages/bundler-webpack/src/config/cssRules.ts#L45 2、加一个 babel 插件,识别 import styles from './foo.less' 这种写法时转换为 import styles from './foo.less?modules',把上一步配的功能用起来,注意别漏处理了动态的 import() 场景,参考 https://github.com/umijs/umi-next/blob/b1d7e1c3b1a38fc1db687cde53edace928a28881/packages/babel-preset-umi/src/plugins/autoCSSModules.ts#L17
2
反对
2
收藏
2021-12-28 22:40