本篇内容主要讲解“react antd没有样式如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react antd没有样式如何解决”吧!
创新互联专注于企业营销型网站建设、网站重做改版、兰西网站定制设计、自适应品牌网站建设、html5、商城系统网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为兰西等各大城市提供网站开发制作服务。
react antd没有样式的解决办法：1、在项目最外层组件引入antd样式包，方式如“@import '~antd/dist/antd.css';”；2、在webpack配置中引入“ ['import', { libraryName: 'antd', style: 'css' }],”。
react项目引入antd组件没有样式的问题
明显是antd的样式文件没有引入进来，有两种方式解决：
1.在项目最外层组件引入antd样式包
如在App.css中最上面加
@import '~antd/dist/antd.css';
2.webpack配置引入
module.exports = {
entry: {
index: path.join(srcPath, 'index.js'),
},
module: {
rules: [
// babel-loader
{
test: /\.(js|jsx)$/,
loader: ['babel-loader?cacheDirectory'],// 开启缓存
include: srcPath,
// exclude: /node_modules/
loader: require.resolve('babel-loader'),
options: {
plugins: [
// 引入样式为 css
// style为true 则默认引入less
['import', { libraryName: 'antd', style: 'css' }],
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html'
})
]
}
到此，相信大家对“react antd没有样式如何解决”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
