vue工程为组件自动注入全局样式文件

开发过程中，随着工程变大，不免要提取出一些公共的样式，如variables、mixins、functions等几乎在所有业务组件中都会用到的样式：

-- src
---- styles
-------- variables.less
-------- mixins.less
-------- functions.less

如果每个需要的组件都要手动导入一次，就太繁琐了：

<script lang="less">
@import "../styles/variables";
@import "../styles/mixins";
@import "../styles/functions";

// 其他样式
</script>

当然最直接的改进方案是创建一个包含上面引入的入口样式文件entry.less，然后在各组件中导入即可：

// entry.less

@import './variables';
@import './mixins';
@import './functions';

<script lang="less">
@import "../styles/entry";

// 其他样式
</script>

但是手动导入毕竟繁琐，若能够自动导入就大善了，所幸配置自动导入也不繁琐，下面以常用的Less、Stylus、Sass/Scss等预处理器为例说明如何在vue工程中配置自动导入：

Less和Stylus

配置Less和Stylus自动导入有两种方案：

• 使用style-resources-loader
• 使用vue-cli-plugin-style-resources-loader

这里我们推荐使用第一种，因为第二种方案只是对第一种方案的包装，且暂不支持热更新。

安装style-resources-loader

$ npm i -D style-resources-loader

配置vue.config.js

如果工程根目录下没有vue.config.js文件，手动创建一下即可，然后插入以下代码：