php框架和antd结合,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

完美解决