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配置为lessless-loadersass配置node-sasssass-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文件,全局导入

你可能感兴趣的:(Vue 之 less / scss 全局自动导入)