fix: use relative assets url in overrides.less

packages/preset-umi/fixtures/overrides/less/index.less

@@ -1,7 +1,12 @@
 @import "foo/foo.less";
+@import "./styles/other.less";
 
 @red: green;
 .a {
   aaa: @red;
   bbb: @primary-color;
 }
+
+.img {
+  border-image: url('./assets/img.png');
+}

packages/preset-umi/fixtures/overrides/less/styles/other.less

@@ -0,0 +1,3 @@
+.img {
+  background: url('../assets/img.png');
+}

packages/preset-umi/package.json

@@ -51,7 +51,7 @@
     "enhanced-resolve": "5.9.3",
     "fast-glob": "3.2.12",
     "html-webpack-plugin": "5.5.0",
-    "less-plugin-resolve": "1.0.0",
+    "less-plugin-resolve": "1.0.2",
     "path-to-regexp": "1.7.0",
     "postcss": "^8.4.21",
     "postcss-prefix-selector": "1.16.0",

packages/preset-umi/src/features/overrides/compileLess.test.ts

@@ -0,0 +1,17 @@
+import { execa } from '@umijs/utils';
+import { join } from 'path';
+
+test('normal', async () => {
+  try {
+    const result = await execa.execa(
+      'tsx',
+      [join(__dirname, './compileLess.testScript.ts')],
+      {
+        stdio: 'inherit',
+      },
+    );
+    expect(result.exitCode).toEqual(0);
+  } catch {
+    throw new Error('compileLess.testScript.ts failed');
+  }
+});

packages/preset-umi/src/features/overrides/compileLess.testScript.ts

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import { join } from 'path';
+import { compileLess } from './compileLess';
+
+const fixturesDir = join(__dirname, '../../../fixtures');
+
+const run = async () => {
+  const filePath = join(fixturesDir, 'overrides/less/index.less');
+  const targetPath = join(fixturesDir, 'overrides/less/output/index.css');
+  const modifyVars = {
+    'primary-color': '#1DA57A',
+  };
+  const alias = {
+    barbar: join(filePath, '../node_modules/bar'),
+  };
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const result = await compileLess({
+    lessContent: content,
+    filePath,
+    modifyVars,
+    alias,
+    targetPath,
+  });
+  const expectContained = `
+.bar {
+  color: red;
+}
+.foo {
+  color: red;
+}
+.img {
+  background: url('../assets/img.png');
+}
+.a {
+  aaa: green;
+  bbb: #1DA57A;
+}
+.img {
+  border-image: url('../assets/img.png');
+}
+`.trim();
+  if (!result.includes(expectContained)) {
+    throw new Error(
+      `result not contains the expect content, result: ${result}`,
+    );
+  }
+};
+
+run().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

packages/preset-umi/src/features/overrides/compileLess.ts

@@ -1,18 +1,27 @@
 import less from '@umijs/bundler-utils/compiled/less';
+import { winPath } from '@umijs/utils';
 
-export async function compileLess(
-  lessContent: string,
-  filePath: string,
-  modifyVars: Record<string, string> = {},
-  alias: Record<string, string> = {},
-) {
+export async function compileLess(opts: {
+  lessContent: string;
+  filePath: string;
+  modifyVars: Record<string, string>;
+  alias: Record<string, string>;
+  targetPath: string;
+}) {
+  const {
+    lessContent,
+    filePath,
+    modifyVars = {},
+    alias = {},
+    targetPath,
+  } = opts;
+  const resolvePlugin = new (require('less-plugin-resolve') as any)({
+    aliases: alias,
+    urlRewriteTargetPath: winPath(targetPath),
+  });
   const result = await less.render(lessContent, {
     filename: filePath,
-    plugins: [
-      new (require('less-plugin-resolve') as any)({
-        aliases: alias,
-      }),
-    ],
+    plugins: [resolvePlugin],
     javascriptEnabled: true,
     modifyVars,
   });

packages/preset-umi/src/features/overrides/overrides.ts

@@ -16,21 +16,24 @@ export default (api: IApi) => {
       const filePath = api.appData.overridesCSS[0];
       let content = readFileSync(filePath, 'utf-8');
       if (content === cachedContent) return;
+      const subPath = 'core/overrides.css';
+      const targetPath = join(api.paths.absTmpPath!, subPath);
       const isLess = filePath.endsWith('.less');
       if (isLess) {
-        content = await compileLess(
-          content,
+        content = await compileLess({
+          lessContent: content,
           filePath,
-          {
+          modifyVars: {
             ...api.config.theme,
             ...api.config.lessLoader?.modifyVars,
           },
-          api.config.alias,
-        );
+          alias: api.config.alias,
+          targetPath,
+        });
       }
       content = await transform(content, filePath);
       api.writeTmpFile({
-        path: 'core/overrides.css',
+        path: subPath,
         content: content || '/* empty */',
         noPluginDir: true,
       });