babel-plugin-import不生效的問題
阿新 • • 發佈：2019-02-10
問題描述：
使用create-react-app生成專案，然後eject，然後安裝了antd和babel-plugin-import依賴包，按antd官網的說明在babelrc裡面加了配置：
{
"plugins": [
["import", { libraryName: "antd", style: "css" }]
]
}
大概2016年10月份按這個流程構建的專案，是沒有任何問題的，但是今天重新構建一遍之後，發現babel-plugin-import並沒有生效，瀏覽器還是警告：You are using a whole pachage of antd，而且antd的元件都沒有樣式
解決：
在webpack配置檔案的loader配置裡面來配置antd，即：
loaders: [
...
{
text: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: [["import", { libraryName: "antd", style: "css" }]]
}
},
...
]
問題解決。
即，配置babel-plugin-import有兩種方式，可以在babelrc裡面，也可以在webpack裡面，但是當前版本下在babelrc裡面配置就會出現不生效的問題。