Skip to content

fix: resolve .less import issue in ES build (#2844) #2845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lzxue wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: resolve .less import issue in ES build (#2844) #2845

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions packages/component/.fatherrc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@ const isProduction = process.env.NODE_ENV === 'production';

export default defineConfig({
extends: '../../.fatherrc.base.ts',
// 使用 babel 编译 esm/cjs 产物，启用 transform-import-css-l7 插件完成 CSS 内联打包
esm: { transformer: 'babel' },
cjs: isProduction ? { transformer: 'babel' } : undefined,
});
// Fix: 使用 esbuild transformer 来正确处理 CSS/LESS 导入
// esbuild 可以正确地将 .less 导入转换为内联 CSS
esm: {
transformer: 'esbuild',
platform: 'browser',
},
cjs: isProduction
? {
transformer: 'esbuild',
Comment on lines +10 to +15

@gemini-code-assist gemini-code-assist Bot Apr 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

PR 描述中提到切换到 esbuild transformer 可以将 .less 导入转换为内联 CSS。但在 father 的非 bundle 模式（即 esm 和 cjs 配置）下，esbuild 是逐文件进行转换的，它并不会解析或内联被导入的 CSS/LESS 文件。这意味着构建产物（如 es/index.js）中很可能依然保留着 import "./css/index.less"，无法解决 issue #2844。原本使用的 babel transformer 配合注释中提到的 transform-import-css-l7 插件正是为了处理此类需求，切换到 esbuild 会导致这些 Babel 插件失效。

platform: 'node',

@gemini-code-assist gemini-code-assist Bot Apr 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

对于 @antv/l7-component 这种纯浏览器端的组件库，建议将 cjs 的 platform 也设置为 browser。虽然 cjs 产物常用于 Node 环境（如 SSR 或测试），但统一设置为 browser 可以确保 esbuild 在转换时采用一致的浏览器端默认行为，避免潜在的环境差异问题。

Suggested change
platform: 'node',
platform: 'browser',

}
: undefined,
});
Loading