antd 结合react 和webpack 样式与官网不同

项目环境调试的时候打算使用antd 做ui框架，但是试了一下，好像和官网的样式不太一样

企业微信截图_15398540171684.png

上面这个是我自己出来的样式

然后下面这个是官网的样式

image.png

怎么看都不一吧，差了好多，去百度了一下，一堆方法，都没用

我是直接

import 'antd/dist/antd.css';
import { Rate } from 'antd';

然后组件直接写,但是样式差太多了
百度，谷歌，都没有解决这个问题
后来无意中在官网看到这个，好奇点了一下 “没有生效” 这个标签

image.png

跳到这里

image.png

原来如此，不能引css文件，要引入less文件，可是我这个项目是用sass的，不过好在官网直接给了webpack4的配置
在这里，其实就是稍微拉上去就好了

image.png

image.png

方便复制我把源码放上来

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

然后我引用的地方改成

import 'antd/dist/antd.less';
import { Rate } from 'antd';

嗯改成less的引入

image.png

完美解决