vue组件库合并样式打包成less文件

前言

基于公司需求，会搭建一个常规的组件 ui 库，简单的组件库还是非常好搭建的，我也搭建了很多次了，美滋滋的去搭建了，局部组件、公共组件，巴拉巴拉一顿输出。

在于 antdesign 经常会自己设置主题，我们的组件库需要支持 antdesign 中的变量继承，看到 antdesign 在 main.js 中可以 直接 import '*****.less'， 我是比较好奇的，但是还是真没在组件库做过。开始想到的是用 webpack 或者 gulp 进行 打包成 less ，在于本人技术实在尴尬，网上也搜不到对应的东西。 后面想想，干脆自己用 fs 的方式进行操作文件抽离出来，时间又紧迫，只好想了后就开始行动，经过几个小时的奋战，把文件的样式 class 都设置成了比较语义化，以及成功在其他项目引用修改变量能顺利修改。

开始

vue-template-compiler

我们需要分离 vue 文件中的 style 中的样式，那么vue-template-compiler必不可少！

vue-template-compiler是编译 vue 模板的包，传入模板返回AST 抽象语法树。

例子

下面是一个简单的 tooltip 小组件。

<template>
  <tooltip placement="top">
    <template slot="title" v-if="isAllShow || content.length > len">
      {
  { tipContent || content }}
    </template>
    {
  { content.length > len ? content.slice(0, len) + "..." : content }}
  </tooltip>
</template>
<script>
  import {
      Tooltip } from "ant-design-vue";
  export default {
     
    name: "CTooltip",
    components: {
      Tooltip },
    props: {
     
      tipContent: {
     
        type: String,
        default: "",
      },
      content: {
     
        type: String,
        default: "",
      },
      len: {
     
        type: Number,
        default: 12,
      },
      isAllShow: {
     
        type: Boolean,
        default: false,
      },
    },
  };
</script>

我们现在来获取它的结构

// 引入 vue-template-compiler
const compiler = require("vue-template-compiler");
// 处理文件与目录路径
const path = require("path");
// 处理文件的读写、复制、s删除、重命名等操作
const fs = require("fs");
// 拼接路径
const resolve = (dir) =></