官方说明的两种方式:
第一种,直接显式引入js和css文件
import Table from 'antd/lib/table'; // 加载 JS
import 'antd/lib/table/style/css'; // 加载 CSS
对应的webpack中babel配置:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
解释:实际上 import的是一个名为css的js文件,里面又require了一堆用到的css文件。这样webpack解析的时候,无法处理css 文件,会报错,于是加上css-loader。跑起来又发现实际上根本没有加载上任何样式,再加上style-loader后就可以了。最终效果是一堆的style直接嵌入到当前页面了。
第二种,使用官方推荐的babel插件,babel-plugin-import,看起来像antd团队自己做的吧
import {Table} from 'antd'
对应的babel>option配置:
plugins: [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
注:如果样式加不上,好好检查loader