[Bug] overrides.css 样式文件问题

[fz6m]

说明

目前 overrides.css|less|scss 切换到临时生成的方案（为了 mako），存在一些问题，目前已知的三类问题如下：

1. alias 和 webpack 保持一致的问题。

2. url('./relative/path.png') 相对静态资源导入路径问题。

3. @import 其他文件的路径问题。

overrides.css 的问题

种类	alias	url	@import
支持	🟢	🔴	🟢

由于 overrides.css 源文件在 src/overrides.css ，而产物在 src/.umi/core/overrides.css ，如果原模原样的编译，则对静态资源的相对引用会找不到而报错，如：

.a { background: url('./assets/image.jpg') }

这个相对路径是相对于源文件寻找的，而不是产物，之前有反馈在 overrides.less 中出现此问题，我们通过 less plugin 去修改 url 路径解决了（ #11800 ）。

期望的解决方案

由于 .css 文件没有 less plugin 编译，期望能通过 postcss 插件修改 url 路径解决。

overrides.scss 的问题

不可用

和 webpack 编译分开后，就不支持使用 overrides.scss 了。

期望的解决方案

和 overrides.less 一样，用 sass 编译，但要至少要考虑以上三种问题。

overrides.less 的问题

种类	alias	url	@import
支持	🟢	🟢	🔴

url 静态资源相对路径问题

经过 #11800 反馈，通过 less 插件解决了。

@import 导入其他文件后的路径问题

这种问题主要发生在 @import 导入其他 .less 文件后，在其他 .less 中又 @import 导入了其他 .css 文件（由 cc zsxq 得知的一种 case）：

// 目录结构
 - styles
   - a.less
   - b.css
 - overrides.less 

// overrides.less
@import './styles/a.less';

// styles/a.less
@import './b.css';

// styles/b.css
.a {}

此时产物结果为：

// src/.umi/core/overrides.css
@import 'b.css';

我们期望他转换为绝对路径。

期望的解决方案

less plugin 将所有 @import './xxx.css' 相对导入转为绝对路径解决。

（为什么不采用 relativeUrls ？因为经尝试发现，relativeUrls 会干预其他 less plugin 对 url() 的修改，并且不能保证 url('./relative/path') 的相对导入正确，故我感觉只能使用 less plugin 做 @import 的路径修改了）。

备注

此 overrides.css|less|scss 使用的人数很少很少，故优先级不高。

[crazyair]

这个文件虽说是加 body，但没什么实际作用，优先级该不够还是不够（对于 antd v5）。完全可以自己新建个 custom.less 在入口文件引入的写法