From 47ed81b3672f0fe20f5121fd103d361286a17c8e Mon Sep 17 00:00:00 2001
From: Ruyi Li <ruyili2002@gmail.com>
Date: Mon, 11 Oct 2021 20:38:11 -0400
Subject: [PATCH 1/2] fix(vuetransfomer): fix unknown asset language for vue
 scripts/templates/styles

---
 packages/transformers/vue/src/VueTransformer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/transformers/vue/src/VueTransformer.js b/packages/transformers/vue/src/VueTransformer.js
index c01b3d6ea8f..dc237b06586 100644
--- a/packages/transformers/vue/src/VueTransformer.js
+++ b/packages/transformers/vue/src/VueTransformer.js
@@ -207,7 +207,7 @@ async function processPipeline({
             await resolve(asset.filePath, template.src),
           )
         ).toString();
-        template.lang = extname(template.src);
+        template.lang = extname(template.src).slice(1);
       }
       let content = template.content;
       if (template.lang && !['htm', 'html'].includes(template.lang)) {
@@ -267,7 +267,7 @@ ${
             await resolve(asset.filePath, script.src),
           )
         ).toString();
-        script.lang = extname(script.src);
+        script.lang = extname(script.src).slice(1);
       }
       let type;
       switch (script.lang || 'js') {
@@ -317,7 +317,7 @@ ${
             if (!style.module) {
               style.module = MODULE_BY_NAME_RE.test(style.src);
             }
-            style.lang = extname(style.src);
+            style.lang = extname(style.src).slice(1);
           }
           switch (style.lang) {
             case 'less':

From 044ae11fadf6a3f7cb8f9fe7fadf450a560ef8a9 Mon Sep 17 00:00:00 2001
From: Ruyi Li <ruyili2002@gmail.com>
Date: Thu, 14 Oct 2021 16:22:30 -0400
Subject: [PATCH 2/2] test: loading external files from vue sfcs

---
 .../integration/vue-external-files/App.vue    |  3 +++
 .../integration/vue-external-files/main.pug   |  5 ++++
 .../integration/vue-external-files/script.ts  |  7 ++++++
 .../integration/vue-external-files/style.scss | 24 +++++++++++++++++++
 packages/core/integration-tests/test/vue.js   | 15 ++++++++++++
 5 files changed, 54 insertions(+)
 create mode 100644 packages/core/integration-tests/test/integration/vue-external-files/App.vue
 create mode 100644 packages/core/integration-tests/test/integration/vue-external-files/main.pug
 create mode 100644 packages/core/integration-tests/test/integration/vue-external-files/script.ts
 create mode 100644 packages/core/integration-tests/test/integration/vue-external-files/style.scss

diff --git a/packages/core/integration-tests/test/integration/vue-external-files/App.vue b/packages/core/integration-tests/test/integration/vue-external-files/App.vue
new file mode 100644
index 00000000000..eb279ac0e69
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/vue-external-files/App.vue
@@ -0,0 +1,3 @@
+<template src="./main.pug"></template>
+<style src="./style.scss"></style>
+<script src="./script.ts"></script>
diff --git a/packages/core/integration-tests/test/integration/vue-external-files/main.pug b/packages/core/integration-tests/test/integration/vue-external-files/main.pug
new file mode 100644
index 00000000000..3f8aacc9ed0
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/vue-external-files/main.pug
@@ -0,0 +1,5 @@
+div
+  h1 foo 
+  h2 bar
+  div.box
+    p {{ msg }}
diff --git a/packages/core/integration-tests/test/integration/vue-external-files/script.ts b/packages/core/integration-tests/test/integration/vue-external-files/script.ts
new file mode 100644
index 00000000000..1c588c46c0c
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/vue-external-files/script.ts
@@ -0,0 +1,7 @@
+export default {
+  data () {
+    return {
+      msg: 'Hello World'
+    }
+  }
+}
diff --git a/packages/core/integration-tests/test/integration/vue-external-files/style.scss b/packages/core/integration-tests/test/integration/vue-external-files/style.scss
new file mode 100644
index 00000000000..a2c0d32288b
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/vue-external-files/style.scss
@@ -0,0 +1,24 @@
+$cool-color: #c0ff33;
+
+div {
+  h1 {
+    color: red;
+  }
+}
+
+h2 {
+  color: blue;
+
+  &:hover {
+    color: $cool-color;
+  }
+}
+
+.box {
+  border: 1px solid black;
+
+  p {
+    color: $cool-color;
+    font-size: 10rem;
+  }
+}
diff --git a/packages/core/integration-tests/test/vue.js b/packages/core/integration-tests/test/vue.js
index f55b0b82376..dc87ba48ed7 100644
--- a/packages/core/integration-tests/test/vue.js
+++ b/packages/core/integration-tests/test/vue.js
@@ -105,4 +105,19 @@ describe('vue', function() {
     assert.equal(typeof output.render, 'function');
     assert.deepEqual(output.data(), {msg: 'Hello from Component A!'});
   });
+  it('should load external templates/styles/scripts properly', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/vue-external-files/App.vue'),
+    );
+    let output = (await run(b)).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.data(), {msg: 'Hello World'});
+    let contents = await outputFS.readFile(
+      path.join(distDir, 'App.css'),
+      'utf8',
+    );
+    assert(contents.includes('color: #c0ff33'));
+    assert(contents.includes('h2:hover'));
+    assert(contents.includes('.box p'));
+  });
 });