Vue 之 less / scss 全局自动导入

前言

---

基于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文件，全局导入