怎么配置webpack可以像umi里那样 根据less引入的方式 决定是否使用css module?
最近在尝试搭建一个项目模板，
团队里喜欢和不喜欢css module的人都有
喜欢的人又不想在文件名上加.module.嫌麻烦
umi里根据引入的方式不同就可以决定是否使用css module很好
大佬真心求教😁
1 个回答
按赞数排列
先看使用，
// 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