React 组件库开发

LECP 支持 React 组件库的开发，包含以下功能：

支持 tsx/jsx 文件编译
支持 css 文件编译
支持 css module 编译

默认值 {packageName}__[local], 仅仅作为 namespace 使用。防止样式冲突和方便用户覆盖。

示例

import { defineConfig } from "@shined/lecp";

export default defineConfig({
	react: {
		runtime: "automatic", // 可以在 tsconfig.json 中配置, lecp 会自动读取
	},
	css: {
		cssModules: true, // 开启 css modules
		lessCompile: true, // 默认不推荐使用 less，仅仅作为基于 antd 二开组件的兼容支持
	},
});

具体配置请参考：

限制

使用 lightningcss 作为 css解析器，所以不支持 :global, :local，只支持 :global(.foo), :local(.foo) 。详情

/* ❎ */
:global .foo {
	color: red;
}

/* ❎ */
:global .foo {
	.bar {
		color: red;
	}
}

/* ✅ */
:global(.foo) {
	color: red;
}

/* ✅ */
:global(.foo) {
	:global(.bar) {
		color: red;
	}
}