在 Vue CLI4中：（注意看下版本，3版本不是此配置）
若想在组件中使用 less文件中的变量、mixin等，
若不全局引入，我们在每个组件中一个个引入，会非常麻烦。如：
home.vue
<style lang="less" scoped>
@import '~@/assets/less/imports.less';
若想在App.vue 导入，但会出错。
设置全局引入(即自动化导入)：
使用 webpack 的 style-resources-loader插件可自动化导入less文件、Sass、Stylus文件。
需安装 yarn add style-resources-loader --dev
例如自动化导入 less 文件：
（前提注意需要安装有 less-loader 和 less）
然后需配置 Vue.config.js ，加入以下代码：
const path = require('path');
module.exports = {
......
// less文件全局引入（即自动化导入）
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/less/imports.less'),
],
})
}
在Home.vue 直接使用 imports.less 中的变量即可。不用再手动引入less文件了。
.login {
color: @homeColor;
}
详情参见Vue CLI官方文档：
