官方說明的兩種方式:
第一種医清,直接顯式引入js和css文件
import Table from 'antd/lib/table'; // 加載 JS
import 'antd/lib/table/style/css'; // 加載 CSS
對(duì)應(yīng)的webpack中babel配置:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
解釋:實(shí)際上 import的是一個(gè)名為css的js文件汰扭,里面又require了一堆用到的css文件。這樣webpack解析的時(shí)候,無法處理css 文件骡男,會(huì)報(bào)錯(cuò)赃蛛,于是加上css-loader。跑起來又發(fā)現(xiàn)實(shí)際上根本沒有加載上任何樣式港粱,再加上style-loader后就可以了螃成。最終效果是一堆的style直接嵌入到當(dāng)前頁面了。
第二種查坪,使用官方推薦的babel插件寸宏,babel-plugin-import,看起來像antd團(tuán)隊(duì)自己做的吧
import {Table} from 'antd'
對(duì)應(yīng)的babel>option配置:
plugins: [
? ? ["import", {
? ? ? "libraryName": "antd",
? ? ? "libraryDirectory": "es",
? ? ? "style": "css" // `style: true` 會(huì)加載 less 文件
? ? }]
]
注:如果樣式加不上偿曙,好好檢查loader