自己发布UI库npm包怎么按需引入css

Question

我自己按照ant-design的方式封装了公司需要的ui组件库，是想着按照ant-design那种方式引入模块和babel按需引入css，这部分改怎么配置呢，求大神详解。

Answer 1

参考GPT和自己的思路：

这个问题的解决方案需要分几个步骤来完成：

1. 首先，需要在开发时使用 babel-plugin-import 插件对组件库按需引入：

"plugins":[
  ["import", {
    "libraryName": "your-ui-library",
    "libraryDirectory": "lib/components",
    "camel2DashComponentName": false,
  }],
],

其中，libraryName 指的是你的组件库的名称，libraryDirectory 指的是组件库内组件的目录，camel2DashComponentName 表示将驼峰命名转换为短横线命名（false 表示不进行转换）。

1. 然后，在组件库的入口文件中，需要将所有组件和样式导出：

export { default as Button } from './Button';
export { default as Input } from './Input';
export { default as Select } from './Select';
// ...
export { default as styles } from './styles.css';

其中，styles.css 是所有组件公用的样式文件。

1. 最后，在使用组件库的项目中，需要引入样式文件，并在需要的组件中按需引入样式：

import React from 'react';
import { Button } from 'your-ui-library';
import 'your-ui-library/styles.css';

function App() {
  return (
    <div>
      <Button className="my-button">Click me</Button>
    </div>
  );
}

export default App;

这样，在构建时，webpack 会将所有按需引入的样式打包到单独的 css 文件中，避免了样式重复和冗余的问题。