---
title: "@farmfe/plugin-modular-import"
locale: "zh"
version: "current"
canonicalUrl: "https://farmfe.org/zh/docs/plugins/official-plugins/modular-import"
publicationStatus: "prerelease"
---

<a id="farmfeplugin-modular-import"></a>
# @farmfe/plugin-modular-import


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


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install -D @farmfe/plugin-modular-import
```


**yarn**

```javascript
yarn add -D @farmfe/plugin-modular-import
```


**pnpm**

```javascript
pnpm add -D @farmfe/plugin-modular-import
```



<a id="usage"></a>
## 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";
```


<a id="options"></a>
## 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",
});
```