LECP
  • 首页
  • 配置
  • 常见问题
  • 更新日志
    介绍
    快速开始
    功能
    构建模式
    Targets
    DTS
    Shims
    React
    Workspace
    配置
    CLI & API
    其它
    常见问题
    更新日志
    Previous pageShimsNext pageWorkspace

    #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 二开组件的兼容支持
      }
    });

    具体配置请参考:

    • 配置 react
    • 配置 css

    #限制

    使用 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;
        }
    }