npm 插件，抽离*.vue 中的模版代码生成 Scss 代码骨架

在自己开发过程中,经常会对着 UI 切图，一次性将 HTML 骨架给写完，然后在 sass/less 文件中，照着 HTML 代码写一遍 CSS 层级，最后填充样式。

觉得这样麻烦，然后手撕了个 npm 插件，直接将 template 转为 sass 骨架代码

github 地址： https://github.com/wuyic/t2css

使用方法

npm i -D t2css

npx t2css sourceFilePath targetSourceFile

生成前的 Vue 代码

./a.vue 文件
<template>
  <div class="testArea">
    <div class="instruction i1">
      <img class="img" src="@/images/common/[email protected]" alt="">
    </div>
    <div class="instruction1 i2">
      <p class="p">ssds</p>
      <img src="" alt="">
    </div>
    <div>
      <div class="is3">
        <div class="is33">
          <div>
            <div class="is333">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

生成后的 SCSS 骨架：

.testArea {
 .instruction {
   &.i1 {
   }
   .img {
   }
 }
 .instruction1 {
   &.i2 {
   }
   .p {
   }
   img {
   }
 }
 .is3 {
   .is33 {
     .is333 {
       img {
       }
     }
   }
 }
}