diff --git a/packages/preset-umi/fixtures/overrides/less/index.less b/packages/preset-umi/fixtures/overrides/less/index.less index f7b3754af161..1a05cb008eb3 100644 --- a/packages/preset-umi/fixtures/overrides/less/index.less +++ b/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'); +} diff --git a/packages/preset-umi/fixtures/overrides/less/styles/other.less b/packages/preset-umi/fixtures/overrides/less/styles/other.less new file mode 100644 index 000000000000..457154e076e0 --- /dev/null +++ b/packages/preset-umi/fixtures/overrides/less/styles/other.less @@ -0,0 +1,3 @@ +.img { + background: url('../assets/img.png'); +} diff --git a/packages/preset-umi/package.json b/packages/preset-umi/package.json index 3c1c11cf67e5..eaf916c3e5cf 100644 --- a/packages/preset-umi/package.json +++ b/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", diff --git a/packages/preset-umi/src/features/overrides/compileLess.manullytest.ts b/packages/preset-umi/src/features/overrides/compileLess.manullytest.ts deleted file mode 100644 index b8023ad06c6c..000000000000 --- a/packages/preset-umi/src/features/overrides/compileLess.manullytest.ts +++ /dev/null @@ -1,43 +0,0 @@ -import assert from 'assert'; -import fs from 'fs'; -import { join } from 'path'; -import { compileLess } from './compileLess'; - -const fixturesDir = join(__dirname, '../../../fixtures'); - -// 在 jest 下跑会出错，所以只能手动跑来验证了 -// test('normal', async () => { -(async () => { - const filePath = join(fixturesDir, 'overrides/less/index.less'); - const modifyVars = { - 'primary-color': '#1DA57A', - }; - const alias = { - barbar: join(filePath, '../node_modules/bar'), - }; - const result = await compileLess( - fs.readFileSync(filePath, 'utf-8'), - filePath, - modifyVars, - alias, - ); - assert( - result.includes( - ` -.bar { - color: red; -} -.foo { - color: red; -} -.a { - aaa: green; - bbb: #1DA57A; -} - `.trim(), - ), - ); -})().catch((e) => { - console.error(e); -}); -// }); diff --git a/packages/preset-umi/src/features/overrides/compileLess.test.ts b/packages/preset-umi/src/features/overrides/compileLess.test.ts new file mode 100644 index 000000000000..357f62e5c2d1 --- /dev/null +++ b/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'); + } +}); diff --git a/packages/preset-umi/src/features/overrides/compileLess.testScript.ts b/packages/preset-umi/src/features/overrides/compileLess.testScript.ts new file mode 100644 index 000000000000..7fa9f44a7e6f --- /dev/null +++ b/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); +}); diff --git a/packages/preset-umi/src/features/overrides/compileLess.ts b/packages/preset-umi/src/features/overrides/compileLess.ts index 98503a1e225d..c7d25987ba3a 100644 --- a/packages/preset-umi/src/features/overrides/compileLess.ts +++ b/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 = {}, - alias: Record = {}, -) { +export async function compileLess(opts: { + lessContent: string; + filePath: string; + modifyVars: Record; + alias: Record; + 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, }); diff --git a/packages/preset-umi/src/features/overrides/overrides.ts b/packages/preset-umi/src/features/overrides/overrides.ts index 1f97ba1dcd97..38c239f0e5c5 100644 --- a/packages/preset-umi/src/features/overrides/overrides.ts +++ b/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, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 952b323b68aa..86371e697d4c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2474,8 +2474,8 @@ importers: specifier: 5.5.0 version: 5.5.0(webpack@5.75.0) less-plugin-resolve: - specifier: 1.0.0 - version: 1.0.0 + specifier: 1.0.2 + version: 1.0.2 path-to-regexp: specifier: 1.7.0 version: 1.7.0 @@ -31491,8 +31491,8 @@ packages: webpack: 5.88.2(@swc/core@1.3.67)(uglify-js@3.17.4) dev: true - /less-plugin-resolve@1.0.0: - resolution: {integrity: sha512-offjRh1TfGsTgK0cqpl+RXFB0TFL6rPWy0yhCLhqhSEdWGVQp28K7wZ/ceUrRmWfZ5CSckYMe/KI+ViwaPLljQ==} + /less-plugin-resolve@1.0.2: + resolution: {integrity: sha512-e1AHq0XNTU8S3d9JCc8CFYajoUBr0EK3pcuLT5PogyBBeE0knzZJL105kKKSZWfq2lQLq3/uEDrMK3JPq+fHaA==} dependencies: enhanced-resolve: 5.15.0 dev: false