支持pug文件内的include指令所指向文件的原子类

Author: wujr5

atomcss-loader.js

@@ -126,6 +126,18 @@ module.exports = function(sSource) {
   // 没有找到 template 模板，则无需处理
   if (!sClassString) return sSource;
 
+  // 支持 pug 文件内 include 的文件的编译
+  let pugFileList = sClassString.match(/include \S*\.pug/g) || [];
+  pugFileList.forEach((file) => {
+    let filePath = this.resourcePath.substr(0, this.resourcePath.lastIndexOf('/') + 1) + file.replace('include ', '');
+
+    // pug 文件改变，重新编译主文件
+    this.addDependency(filePath)
+
+    let content = fs.readFileSync(filePath, 'utf-8')
+    sClassString = sClassString.replace(file, content)
+  })
+
   let atomReg = new RegExp(sAtomRegExp, 'ig');
 
   // 获取 pc 端原子类类名数组，并剔除重复的类名

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-atomcss-loader",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "",
   "homepage": "https://github.com/wujr5/vue-atomcss-loader",
   "repository": {

test/src/App.vue

@@ -2,9 +2,11 @@
 div
   h1.fsize-150.h-10.lh-10.bg-red test
   HelloWorld
+  include components/test.pug
 </template>
 
 <script>
+import '../../atomcss-common.css';
 import HelloWorld from './components/HelloWorld.vue';
 
 export default {

test/src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='hello fs-30'>
+  <div class='hello fs-30 fw-600 bg-yellow'>
     <h1>{{ msg }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br>

test/src/components/test.pug

@@ -0,0 +1,3 @@
+div
+  .h-100.lh-100.bg-red 这里是 pug
+  .fs-20 pug pug pug