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 { } } } } }