Modifying component styles in Ant Design Vue often requires bypassing inline style props and directly overirding the underlying CSS classes. When built-in attributes fail to apply expected layouts, a global LESS override integrated into the build pipeline provides a reliable solution.

Prerequisites and Depnedency Installation

Ensure the project includes the necessary Less compilation tools. Execute the following command to add them as development dependencies:

npm install less less-loader --save-dev

Enabling JavaScript Evaluation in Less

Ant Design Vue's theme system relies on Less variables and JavaScript expressions. The loader configuration must explicitly permit JavaScript evaluation. The exact implementation depends on the project's build setup.

Vue CLI 3 & 4 Projects

Update the vue.config.js file at the project root. Inject the configuration flag within the CSS loader options:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
};

Webpack Configurations

Modify the module rules in webpack.config.js. Attach the Less loader configuration with JavaScript evaluation enabled:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true
              }
            }
          }
        ]
      }
    ]
  }
};

Defining Custom Style Overrides

Create a dedicated Less file for theme adjustments. Import the core Ant Design Less entry point to expose theme variables, then append custom rules targeting specific component classes.

src/styles/theme-patch.less

@import '~ant-design-vue/dist/antd.less';

.ant-tabs-bar {
  display: flex;
  justify-content: flex-start;
  // Additional custom properties can be defined here
}

Integrating into the Application Entry

Replace the default CSS import in the main application file with the Less entry points. The framework's base styles and the custom override file must be loaded sequentially to ensure proper cascading.

main.js

import Vue from 'vue';
import Antd from 'ant-design-vue';
import './styles/theme-patch.less';

Vue.use(Antd);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Once the development server restarts, the build pipeline will compile the Less variables and apply the targeted class overrides globally. Verify the component rendering to confirm the layout adjustments.