本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react antd没有样式怎么办?
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没有样式怎么办的详细内容,更多请关注编程网其它相关文章!