babel-plugin-import不生效的问题

转载自：点击打开链接

问题描述：

使用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里面配置就会出现不生效的问题。