VueJs打包后没有正确覆盖第三方组件库样式的解决办法

遇到的问题 ​

在开发过程中使用第三方组件库，为了覆盖其样式，写了一模一样的css选择器，开发时是生效的。

但是打包后变成了第三方组件库覆盖自己写的样式

复现过程 ​

代码 ​

main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import VueRouter from 'vue-router';
import '第三方组件库的样式.css';

用来覆盖组件库样式的less文件index.less

@color: red;

.xx-btn{
  color: @color;
}

在App.vue中引入

<style lang="less" type="text/less">
  @import "./assets/style/index.less";
</style>

说明 ​

在开发过程中，.xx-btn 是可以覆盖第三方组件库的相同 .xx-btn 样式，但是打包后没生效，也就是按钮文字颜色没有变成预期的 red。

查看打包后的css文件 app.xxxxxxx.css,发现自己写的 .xx-btn 样式在第三方组件库的样式前面，也就是说被覆盖了。

从侧面也说明了webpack打包的时候在 main.js 中是从上往下扫描打包进文件中的，那解决办法就出来了。

解决办法 ​

将 css 文件在 main.js 中引入，并且写在第三方组件库下面

import Vue from 'vue';
import App from './App';
import router from './router';
import VueRouter from 'vue-router';
import '第三方组件库的样式.css';
import './assets/style/index.css'

但是这个办法只适用于css文件，不能引less文件，所以如果是less文件，就正常在App .vue中引入

<style lang="less" type="text/less">
  @import "./assets/style/index.less";
</style>

然后，将App.vue在第三方组件库引入后再引入，也就是 main.js 改为：

import Vue from 'vue';
import router from './router';
import VueRouter from 'vue-router';
import '第三方组件库的样式.css';
import App from './App';

这样webpack就先扫描到第三方组件库的样式，写入到app.xxxxx.css中，再扫描到App.vue中的css，在app.xxxxx.css最后追加写入。