本篇内容主要讲解“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没有样式如何解决”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

本文名称：reactantd没有样式如何解决
转载来源：http://chengdu.cdxwcx.cn/article/ppjphe.html