【React】antd design样式无效

Z时代
2024-01-10
分类：技术分享

在react中使用antd design，按照官网说明，采用手动引入样式，样式不生效

【React】antd design样式无效：

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
import 'antd/dist/antd.css';
export default class Index extends React.Component {
render() {
return (
<div>
<Button type="primary">primary</Button>
<Button type="ghost">ghost</Button>
<Button>Default</Button>
</div>
)
}
}

然后使用官网推荐的babel-plugin-import进行按需加载，按照如下配置webpack.config.js

/**
* Created by zhouhao on 2017/5/4.
*/
var path = require('path');
module.exports = {
context: __dirname + '/app',
entry:  "./js/root.js",
module : {
loaders : [
{
test : /\.js?$/,
exclude : /(node_modules)/,
loader : 'babel-loader',
query : {
presets : ['react' , 'es2015'],
plugins: [
["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
]
}
},
{
test : /\.css$/,
loader : 'style-loader!css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]'
// [path][name]_[local]_[hash:base64:5]也可以
}
]
},
output : {
path : __dirname + '/public/',
filename : 'bundle.js'
},
devServer: {
inline: true//实时刷新;
},};

然后样式仍然无法生效

除非在index.html使用link标签引入css文件，才可以生效，不知道为什么

  <link rel="stylesheet" href="https://segmentfault.com/q/1010000009328704/node_modules/antd/dist/antd.min.css" >

使用的各插件版本：

"babel-loader": "^7.0.0",
"babel-plugin-import": "^1.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"css-loader": "^0.28.1",
"postcss-loader": "^1.3.3",
"postcss-modules-values": "^1.2.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^4.1.1",
"style-loader": "^0.17.0",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"antd": "^2.10.0"}