前言
基于cli3，配置 less / scss 全局自动化导入，官方文档 提供了3种方式作自动化导入。
由于比较习惯于less语法，先说less配置，但最终才发现less是最坑的，通过官方向预处理器 Loader 传递选项配置无效，但相同的配置scss可用。
不过对于初恋我不能这么容易就放弃，为了实现less我选择了插件的方案vue-cli-plugin-style-resources-loader插件，理由是chain链式语法看起来好像很繁琐的样子（手动哈哈）。但后来我还发现这还别说最坑的，我继续... 这里的山路十八弯，这里的配置有图有真相。
配置
- 安装
vue-cli-plugin-style-resources-loader插件，安装完成别忘记还有下一步
下载插件
- 选择对应的loader，若没有使用css预编译，就选择css-loader即可
选择插件配置
- 选择对应的loader后，安装就完成了，此时在
vue.config.js中会新增如下配置
const path = require('path')
module.exports = {
// ··· 其他配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
// 需要通过less-loader自动引入的资源，集合类型
patterns: [path.resolve(__dirname, 'src/static/less/mixin.less')]
}
}
}
说明
less / scss 是支持间接引入，即一个 less / scss 可以引入另外的 less / scss 文件。当引用文件时，就会将内部 @import 的文件也一并引入了。
如果再配合自动引入，通过对应的loader将文件自动引入，在使用混入或者全局主题资源时，就不需要再手动导入了，有对应 loader 的地方插件就自动引入了
scss 备胎上场
如官方文档，sass配置简直是真爱啊，如下
说明：less配置为less和less-loader；sass配置node-sass和sass-loader
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名，引入相对路径
data: `@import "@/static/scss/theme.scss";`
}
}
}
}
再吐槽一下less，为什么你不行呢 ~！
做了全局导入，就无需再每个页面导入配置好的scss，有sass-loader就会引入。
备注：
- 项目是支持同时配置less 和 scss 的。
- less 插件的好处可能是支持集合导入吧，强行安慰一波 ~ （虽然可以间接导入）
malk 2018.12.5 -- 这有点类似于iOS的PCH文件，全局导入
