vite-plugin-style-import:一个插件,可按需导入组件库样式

  • u1_646750
    了解作者
  • 156.7KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-26 09:25
    上传日期
vite-plugin-style-import English | 一个插件,可按需导入组件库样式 为什么只导入样式 由于vite本身已按需导入了组件库,因此仅样式不是按需导入的,因此只需按需导入样式即可。 安装(纱线或npm) 节点版本: > = 12.0.0 版本号: > = 2.0.0 yarn add vite-plugin-style-import -D 或者 npm i vite-plugin-style-import -D 影响 import { Button } from 'ant-design-vue' ; ↓ ↓ ↓ ↓ ↓ ↓ import { Button } from 'ant-design-vue' ; import 'ant-design-vue/es/button/style/index.js' ; import { ElBut
vite-plugin-style-import-main.zip
  • vite-plugin-style-import-main
  • .gitignore
    289B
  • package.json
    2.2KB
  • commitlint.config.js
    67B
  • src
  • index.ts
    7.4KB
  • types.ts
    1.8KB
  • jest.config.js
    423B
  • LICENSE
    1KB
  • CHANGELOG.md
    2.8KB
  • tsconfig.json
    417B
  • README.zh_CN.md
    4.7KB
  • .github
  • workflows
  • release.yml
    683B
  • publish.yml
    560B
  • dependabot.yml
    107B
  • .prettierignore
    19B
  • .eslintrc.js
    598B
  • README.md
    4.9KB
  • tests
  • transformImportVar.spec.ts
    273B
  • example
  • .gitignore
    35B
  • package.json
    534B
  • src
  • Test.tsx
    182B
  • main.ts
    385B
  • Test1.jsx
    182B
  • App.vue
    780B
  • shim-vue.ts
    173B
  • public
  • favicon.ico
    4.2KB
  • tsconfig.json
    573B
  • vite.config.ts
    1.1KB
  • index.html
    329B
  • yarn.lock
    64.2KB
  • prettier.config.js
    540B
  • .eslintignore
    18B
  • .husky
  • .gitignore
    2B
  • pre-commit
    210B
  • common.sh
    179B
  • commit-msg
    116B
  • lintstagedrc.js
    250B
  • .editorconfig
    247B
  • yarn.lock
    272.2KB
内容介绍
# vite-plugin-style-import **English** | [中文](./README.zh_CN.md) [![npm][npm-img]][npm-url] [![node][node-img]][node-url] A plug-in that imports component library styles on demand ## Why only import styles Because vite itself has imported the component library on demand, only the style is not on demand, so just import the style on demand. ## Install (yarn or npm) **node version:** >=12.0.0 **vite version:** >=2.0.0 ``` yarn add vite-plugin-style-import -D ``` or ``` npm i vite-plugin-style-import -D ``` ## Effect ```ts import { Button } from 'ant-design-vue'; ↓ ↓ ↓ ↓ ↓ ↓ import { Button } from 'ant-design-vue'; import 'ant-design-vue/es/button/style/index.js'; ``` ```ts import { ElButton } from 'element-plus'; ↓ ↓ ↓ ↓ ↓ ↓ // dev import { Button } from 'element-plus'; import 'element-plus/lib/theme-chalk/el-button.css`; // prod import Button from 'element-plus/lib/el-button'; import 'element-plus/lib/theme-chalk/el-button.css'; ``` ## Usage - Config plugin in vite.config.ts ```ts import { UserConfigExport } from 'vite'; import styleImport from 'vite-plugin-style-import'; export default (): UserConfigExport => { return { // 1. If you are using the ant-design series, you need to configure this // 2. Make sure less is installed in the dependency `yarn add less -D` css: { preprocessorOptions: { less: { javascriptEnabled: true, }, }, }, plugins: [ styleImport({ libs: [ { libraryName: 'ant-design-vue', esModule: true, resolveStyle: (name) => { return `ant-design-vue/es/${name}/style/index`; }, }, { libraryName: 'antd', esModule: true, resolveStyle: (name) => { return `antd/es/${name}/style/index`; }, }, { libraryName: 'vant', esModule: true, resolveStyle: (name) => { return `vant/es/${name}/style`; }, }, { libraryName: 'element-plus', resolveStyle: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; }, resolveComponent: (name) => { return `element-plus/lib/${name}`; }, }, ], }), ], }; }; ``` ### Options | param | type | default | description | | --- | --- | --- | --- | | include | `string、RegExp、(string、RegExp)[]、null、undefined` | `['**/*.js', '**/*.ts', '**/*.tsx', '**/*.jsx']` | Code directory and file format to be converted | | exclude | `string、RegExp、(string、RegExp)[]、null、undefined` | `'node_modules/**'` | Excluded files/folders | | libs | `Lib[]` | | List of libraries to be imported | | root | `string` | `process.cwd()` | Depends on the root directory, if it is a monorepo project, you need to set it manually | **Lib** ```ts { // Need to imported library name libraryName: string; // Custom style file conversion resolveStyle: (name: string) => string; // Name conversion for library export // default: paramCase libraryNameChangeCase?: LibraryNameChangeCase; // If the style file is not .css suffix. Need to turn on this option // default: false esModule?: boolean; /** * There may be some component libraries that are not very standardized. * You can turn on this to ignore to determine whether the file exists. Prevent errors when importing non-existent css files. * Performance may be slightly reduced after it is turned on, but the impact is not significant * default: false */ ensureStyleFile?: boolean; // https://github.com/anncwb/vite-plugin-style-import/pull/5 // Used in some situations where components may need to be introduced on demand, not just to introduce styles.(Libraries that don't support Esm well) // Only work in production resolveComponent?: (name: string) => string; // https://github.com/anncwb/vite-plugin-style-import/issues/12 // `import ${libName} from 'xxxx';` // Used for custom import name // Only work in production transformComponentImportName?: (name: string) => string; } // LibraryNameChangeCase export type LibraryNameChangeCase = ChangeCaseType | ((name: string) => string); export type ChangeCaseType = | 'camelCase' | 'capitalCase' | 'constantCase' | 'dotCase' | 'headerCase' | 'noCase' | 'paramCase' | 'pascalCase' | 'pathCase' | 'sentenceCase' | 'snakeCase'; ``` ## Example **Run Example** ```bash cd ./example yarn install yarn serve ``` ## Sample project [Vben Admin](https://github.com/anncwb/vue-vben-admin) ## License MIT [npm-img]: https://img.shields.io/npm/v/vite-plugin-style-import.svg [npm-url]: https://npmjs.com/package/vite-plugin-style-import [node-img]: https://img.shields.io/node/v/vite-plugin-style-import.svg [node-url]: https://nodejs.org/en/about/releases/
评论
    相关推荐