@b-design/antd v3.0.3

About

B-Design 是阿里云推出的一套面向企业应用领域的设计系统。在企业级软件服务逐渐走向云端化的趋势下，为阿里内部及合作伙伴的 SaaS 系统上云提供标准化的设计规范和指导。

Install

npm install antd @b-design/antd --save

Usage

引用组件

import {Button} from '@b-design/antd'

引用 css 样式

在 javascript 文件中

import '@b-design/antd/dist/b-design-antd.css';

引用 less 样式

在 less 文件中

@import '~@b-design/antd/dist/b-design-antd.less';
@import '~@b-design/antd/lib/style/themes/default.less';
@import '<your-own-less>.less';

引用单个组件样式

import '@b-design/antd/lib/button/style/index.js';

或者使用 babel-plugin

extraBabelPlugins: [
	[
		'babel-plugin-import',
		{
			style: true,
			libraryName: '@b-design/antd',
			libraryDirectory: 'es'
		}
	]
];

更换前缀 prefix

在组件中使用 ConfigProvider

在 less 中替换所有 @ant-prefix 的值

使用 Vite 的情况

由于 Webpack 和 Vite 对 less 中@import 的路径解析不同，使用 vite 时需要在 vite.config.ts 加上

resolve: {
  alias: [{ find: /^~/, replacement: '' }]
},

参考：https://github.com/vitejs/vite/issues/2185#issuecomment-784637827

Build Process

• npm i to install packages.
• npm start to start development.
• npm run docs to build for the doc preview site.
• npm run docs:local to build the doc preview site for local preview.
• npm run compile to build compile for release
• npm run dist to build dist for release
• npm run transpile to generate docs.
• npm run add:comp <ComponentName> to add a component.
• npm run variable to open a viewers that shows a map of all component variables.