Skip to main content
FarmFarm
Version: 2.x (Latest)
On this page

@farmfe/plugin-modular-import

A Rust Farm plugin for transforming named UI-library imports into per-component imports with matching style imports.

Installation

javascript
npm install -D @farmfe/plugin-modular-import
javascript
yarn add -D @farmfe/plugin-modular-import
javascript
pnpm add -D @farmfe/plugin-modular-import

Usage

Register the plugin in farm.config.ts:

ts
import { defineConfig } from "@farmfe/core";
import modularImport from "@farmfe/plugin-modular-import";

export default defineConfig({
  plugins: [
    modularImport({
      libraryName: "element-ui",
    }),
  ],
});

This transforms:

js
import { SomeComponent } from "element-ui";

to:

js
import SomeComponent from "element-ui/lib/SomeComponent";
import "element-ui/lib/SomeComponent/index.css";

Options

  • libraryName: string — UI library package name to transform.
  • libDir?: string — component library directory. Defaults to "lib".
  • camel2Dash?: boolean — controls component-name casing. Defaults to true.
  • styleLibDir?: string — style library directory. Defaults to "lib".
  • styleLibraryName?: string — optional style library name, for example "theme-default".
  • styleLibraryPath?: string — custom style path. Defaults to "index.css".

For example, configuring libDir, styleLibraryName, and styleLibraryPath:

ts
modularImport({
  libraryName: "element-ui",
  libDir: "es",
  styleLibraryName: "theme-default",
  styleLibraryPath: "style/index.css",
});
100%

Drag or pinch to explore. Keyboard: + / − zoom, arrows pan, 0 resets, Esc closes.