A method to extend the button style of ant-design-vue

Version Information

ant-design-vue 1.x

ant-design-vue These styles are currently provided

Then I feel that there should be a very common button that needs a 黄色警告

The expected usage is of course type="warning" .

Not much to say, go directly to the code.

---

Add a less file to the project

 @import '~ant-design-vue/lib/style/themes/default.less';
@import '~ant-design-vue/lib/button/style/mixin.less';

.create-type(@type,@bgColor,@textColor:white) {
  .ant-btn {
    &-@{type} {
      .button-variant-primary(@textColor;@bgColor);
    }
    &-background-ghost&-@{type} {
      .button-variant-ghost(@bgColor);
    }
  }
}

.create-type(warning, #ffae00);

Then you can use it like this in your project

 <a-button type="warning">warning</a-button>
<a-button type="warning" ghost>warning+ghost</a-button>

Precautions

Need to open the less-loader javascriptEnabled option of ---7f30ef3c37dc4e5751291aa52794d020---

vue-cli project refer to the following code

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