react.js - antd使用babel-plugin-import出错

问题描述

问 题

使用babel-plugin-import进行antd资源按需加载时，如下配置:

这样配置可以使用，但仅仅引入了js文件，css仍旧无法引入。但是如下配置，

控制台出现错误：

那位伙伴知道怎么处理吗？

解决方案

您好，请看控制台错误提示信息You may need an appropriate loader to handle this file type.出现该问题的原因应该是您webpack的loaders配置加入了exclude(将antd资源排除其外)和include(未能将antd资源包含其内)。大体说下错误示例和正确示例(仅供参考)。
错误示例：
` {

exclude: /^node_modules$/, // 将antd资源排除其外
test: /\.less$/, 
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less']),
include: [APP_PATH] // 未能将antd资源包含其内

}`
正确示例：
`{

test: /\.less$/, // 去掉exclude: /^node_modules$/和include: [APP_PATH]是为了babel-plugin-import按需加载antd资源
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])

}`

关键点有两处：exclude 和 include，希望对您有帮助。

这篇关于react.js - antd使用babel-plugin-import出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！