@dao-style/unplugin-extend

这个仓库是用于 @dao-style/extend 相关的 unplugin 插件工具。感谢 @antfu。

功能

• 💚 为 @dao-style/extend 按需引入样式。
• ⚡️ 使用 unplugin 以支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等。

安装

npm i @dao-style/unplugin-extend -D

Vite

// vite.config.ts
import DaoStyleExtend from '@dao-style/unplugin-extend/vite';
import groupMapping from '@dao-style/extend/dist/group-mapping.json';

export default {
  plugins: [
    DaoStyleExtend({
      // options
      mapping: groupMapping,
      // 对于特殊的一些组件，指令/与use 函数需要样式时，通常会更新 unplugin 插件，以同步 指令/use 函数对应的样式
      // 但在不及时更新时，可通过配置的方式来写入 对应指令的映射关系
      // 下面是内置的特殊映射（在配置中写入， 除非同名，不会替换（走的时 assign 逻辑））
      // specialImportMapping: {
      //   createNoty: ['noty-layout'],
      //   vLoading: ['loading-layout', 'spinner-circle', 'spinner-dot'],
      //   createLoading: ['loading-layout', 'spinner-circle', 'spinner-dot'],
      //   createGlobalLoading: ['loading-layout', 'spinner-circle', 'spinner-dot'],
      //   useDialogWrapper: ['dialog-wrapper'],
      // },
      specialImportMapping: {
        xxx: [''],
      },
    }),
  ],
};

Rollup

// rollup.config.js
import DaoStyleExtend from '@dao-style/unplugin-extend/rollup';
import groupMapping from '@dao-style/extend/dist/group-mapping.json';

export default {
  plugins: [
    DaoStyleExtend({
      // options
      mapping: groupMapping,
    }),
  ],
};

esbuild

// esbuild.config.js
import { build } from 'esbuild';
import groupMapping from '@dao-style/extend/dist/group-mapping.json';

build({
  plugins: [
    require('@dao-style/unplugin-extend/esbuild')({
      // options
      mapping: groupMapping,
    }),
  ],
});

Webpack

import groupMapping from '@dao-style/extend/dist/group-mapping.json';
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@dao-style/unplugin-extend/webpack')({
      // options
      mapping: groupMapping,
    }),
  ],
};

Vue CLI

import groupMapping from '@dao-style/extend/dist/group-mapping.json';
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@dao-style/unplugin-extend/webpack')({
        // options
        mapping: groupMapping,
      }),
    ],
  },
};

使用

插件会自动转换：

import { DaoLabelExtend } from '@dao-style/extend'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { DaoLabelExtend } from '@dao-style/extend'
import '@dao-style/extend/dist/styles/label-extend.css'

其他插件

• unplugin-vue-components