#### Vite 构建工具 通过 vite-plugin 使用按需加载

[neighbour-oldhuang]

Vite 构建工具 通过 vite-plugin 使用按需加载

Vite 构建工具，使用 vite-plugin-style-import 实现按需引入。

安装插件

npm install babel-plugin-import --save-dev

在 vite.config 中添加配置：

import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: '@nutui/nutui',
          libraryNameChangeCase: 'pascalCase',
          resolveStyle: (name) => {
            return `@nutui/nutui/dist/packages/${name}/index.scss`
          }
        }
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
};

WebPack 构建工具 通过 babel 使用按需加载

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。

安装插件

npm install babel-plugin-import --save-dev

在 .babelrc 或 babel.config.js 中添加配置：

{
  // ...
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-vue'
    ],
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
}

接着像这样在代码中直接引入组件。

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Icon } from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
createApp(App).use(Button).use(Icon).mount("#app");

Originally posted by @richard1015 in https://github.com/jdf2e/nutui/discussions/727

[neighbour-oldhuang]

文档中 additionalData: @import "@nutui/nutui/dist/styles/variables.scss"; 这里在 unix-like 机器上开发 时候 因为 packages下目录 全部是小写， 或报引用不存在

[neighbour-oldhuang]

@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss 可以改成这样

[richard1015]

前几个月已经给插件提pr了，近期我们 重新修改一下官方文档

https://github.com/vbenjs/vite-plugin-style-import/pull/88/files

[yanbowe]

前几个月已经给插件提pr了，近期我们 重新修改一下官方文档

https://github.com/vbenjs/vite-plugin-style-import/pull/88/files

可否用unplugin-vue-components进行按需加载呢， vite-plugin-style-import已经没人维护了吧

[richard1015]

官网文档已更新，暂时先使用vite-plugin-style-import， unplugin-vue-components ，后面我们考虑一下， 感兴趣可以直接去 PR unplugin-vue-components