在使用Ant Design Vue时发现很多样式想要修改却修改不了,有的组件虽然提供了样式修改的接口，但是不起作用啊; 想要自己覆盖样式也覆盖不了,各种方法试到你怀疑人生. 这种框架用起来简单, 但在具体需求方面也很磨人. 例如我在使用tabs标签页时,呈现效果是这样的:
想要tab标签靠左, 怎么调都不行. API提供的tabBarStyle也没用,若试过tabBarStyle能生效的小伙伴可以交流一下.
于是我就自己新建样式进行覆盖.....(下面是正文)
Step 1: 确认安装less-loader 和less依赖, 若没有这两个东西先执行npm进行安装.
Step 2: 开启javascriptEnabled. 由于我使用的是vue-cli 2, 之前在定制主题的时候已经开启了.具体在build/utils.js文件中
// less: generateLoaders('less'),less: generateLoaders('less', {javascriptEnabled: true}),
Step 3:在static文件夹中新建reset.less文件, 找到想要修改样式的类名,直接在reset.less文件中进行设置.如上文例子中需要设置 .ant-tabs-bar的样式, 于是在less文件的配置为：
//static/reset.less@import '~ant-design-vue/dist/antd.less'; //引入less.ant-tabs-bar {float:left;//background: aquamarine;}
Step 4: main.js中引用文件：
import 'ant-design-vue/dist/antd.less'import '../static/reset.less'Vue.config.productionTip = false;Vue.use(Antd);
效果：
备注：非vue-cli 2
若使用vue-cli 3&4, 修改vue.config.js 文件：
// vue.config.jsmodule.exports = {css: {loaderOptions: {less: {javascriptEnabled: true}}}}
或者webpack@4,修改 webpack.config.js 文件：
// webpack.config.jsmodule.exports = {rules: [{test: /\.less$/,use: [{loader: 'style-loader',}, {loader: 'css-loader', // translates CSS into CommonJS}, {loader: 'less-loader', // compiles Less to CSSoptions: {javascriptEnabled: true},}],// ...other rules}],// ...other config}
可以参考：/article/1280996272999776256.htm
