单组件的vue文件一般把样式放在<style scoped></style>里面，如果只是简单的样式，这样放没问题，但是公共样式和需要修改外部公共组件样式的情况就行不通了。

公共样式

对于多个业务组件需要写相同的样式时，由于使用了scoped属性，即使父子组件之间的样式也不能共用了。

这种情况可以把公共的样式提取到一个公共文件中，并在<style scoped></style>中使用@import语法导入样式文件。例如公共样式存放在common.less文件中，在需要使用到该样式的组件中这样导入：

<style lang='less' scoped>
@import 'common.less';
</style>

修改公共组件库样式

对于引用的外部公共组件库，如果使用scoped属性就无法修改样式了，可以在<style scoped></style>下面再添加一个不带scoped属性的<style></style>，并把需要覆盖的样式写在里面。为了不影响别的地方使用，给组件外面加上一个类名。

以公共组件button为例，需要改变button的padding大小：

<style scoped>
</style>

<style>
  .my-new-class {
    .ant-button-default {
      padding: 24px;
    }
  }
</style>