解决同时使用antd俩个不同版本的样式错乱问题

一、背景

项目需要同时使用antdV2-vue和antdV3-vue的版本。

原因是想用antdV2里面的rangePicker。

最开始的方案是单独去github中迁移RangePicker的代码，但迁移过程中发现基本上会把antdV2大部分的组件都依赖到，那干脆一不做二不休让俩个版本共存，也不迁移代码了。

二、问题

当我们单独使用antdV2的组件的时候会发现样式不对劲。这个时候大家肯定能想到没引入antdV2的样式。

我们会尝试如下引用方式：

1.错误的解决方案一：在js中引入

<script lang="ts">
  import 'ant-design-vue-v2/dist/antd.css';
<script>

这样直接在js里面引入会影响全局antd的各种组件样式都错乱【antdV2和antdV3的css文件样式冲突导致的】

---

2.错误的解决方案二：css引入文件地址然后加scoped

<style scoped src="ant-design-vue-v2/dist/antd.css"></style>

这样会导致你引入无效，因为是scoped只会在当前的文件里面生效

---

三、解决方案

最后我们在对应的组件文件中去引入该组件专属对应的css文件即可。【注意style不要加scoped，否则就无法生效了】

<style>
  @import url('../../node_modules/ant-design-vue-v2/es/date-picker/style/index.css');
</style>

---

四、结语

本文讲的是vue项目中用ant-design-vue，react用antd的话也是类似的道理。如果大家实在弄不来的话可以给笔者留言（看到了会协助你进行解决），然后笔者后面追加一个react的解决过程。