项目环境调试的时候打算使用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
完美解决