解决 Vue CSS 样式重复载入，为 Vue 添加全局 less 或 sass 基础样式库

诉求

项目开发使用了 iView 组件库，在开发过程当中想自定义 iView 主题可是按照 iView 官方推荐「变量覆盖」方法配置完后会出现 CSS 样式重复载入的状况，以下图：

网上包括 Vue CLI 官方都是推荐使用 style-resources-loader 进行「开发环境」自动化导入，可是你会发现按照给出的方法配置完以后仍是会出现 CSS 样式重复的状况，折腾了很久最终经过比较 iView 官方的「变量覆盖」教程和 Vue CLI 官方的自动导入教程发现了问题所在：

发现错误

iView 推荐的「变量覆盖」方法是这样的：

实质上就是新建一个 less 文件，引入 iview 的 less 入口文件，覆盖官方提供的可覆盖变量，而后在 mian.js 中引用自定义的 less 文件代替引用 iview less 入口文件。

而 Vue CLI 提供的自动化导入教程是这样的：

实质上就是在每一个文件（全局）导入咱们提供的样式文件（示例中是 ./src/styles/imports.styl' 文件）

正常来讲按照 Vue CLI 官方给出的自动化导入教程配置就能够在开发环境下为全局导入「基础样式库」，但我由于先使用了 iView 官方提供的「变量覆盖」方法修改了基础样式，又把带有引入 iview less 入口文件命令的自定义 less 文件当成基础样式库导入到了全局，这就形成了全局每个页面都导入了一次 iview 样式从而引起前面所说的 CSS 样式重复载入。

我当时的错误配置以下：

解决方案

正确的配置方法是将本来糅杂的样式文件分离成「全局样式入口文件」和「基础样式库文件」两个文件：

「全局样式入口文件」用来引入须要的文件（在个人项目中是「iview less 入口文件」和「基础样式库文件」）; 「基础样式库文件」用来存放项目的基础样式（通常为 less sass 变量和公用函数等等）;

修改后的配置以下：

注：个人「自动化导入」部分是参考 码路芽子-Vue Cli3.0 全局引入 less 变量 进行设置的。

效果以下：

参考

1. 码路芽子-Vue Cli3.0 全局引入 less 变量
2. Vue CLI 官方文档-CSS 相关-自动化导入