fix(plugin-vue): support external import URLs for monorepos (#524)

Author: Kolobok12309

packages/plugin-vue/src/index.ts

@@ -387,6 +387,10 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
             getTempSrcDescriptor(filename, query)
           : getDescriptor(filename, options.value)!
 
+        if (query.src) {
+          this.addWatchFile(filename)
+        }
+
         if (query.type === 'template') {
           return transformTemplateAsModule(
             code,

playground/vue-external/src-import/SrcImport.vue

@@ -0,0 +1,4 @@
+<style src="/#external/src-import/style.css" scoped></style>
+<style src="/#external/src-import/style2.css" scoped></style>
+<template src="./template.html"></template>
+<script src="./script.ts"></script>

playground/vue-external/src-import/css.module.css

@@ -0,0 +1,7 @@
+.one {
+  background: yellow;
+}
+
+.two {
+  border: solid 1px red;
+}

playground/vue-external/src-import/script.ts

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+import SrcImportStyle from './srcImportStyle.vue'
+import SrcImportStyle2 from './srcImportStyle2.vue'
+import SrcImportModuleStyle from './srcImportModuleStyle.vue'
+import SrcImportModuleStyle2 from './srcImportModuleStyle2.vue'
+
+export default defineComponent({
+  components: {
+    SrcImportStyle,
+    SrcImportStyle2,
+    SrcImportModuleStyle,
+    SrcImportModuleStyle2,
+  },
+  setup() {
+    return {
+      msg: 'hello from script src!',
+    }
+  },
+})

playground/vue-external/src-import/srcImportModuleStyle.vue

@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.one">src for import css module</div>
+</template>
+<style lang="scss" module src="/#external/src-import/css.module.css" />

playground/vue-external/src-import/srcImportModuleStyle2.vue

@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.two">src for import css module</div>
+</template>
+<style lang="scss" module src="/#external/src-import/css.module.css" />

playground/vue-external/src-import/srcImportStyle.vue

@@ -0,0 +1,7 @@
+<style src="/#external/src-import/style.css" scoped></style>
+<template>
+  <div class="src-imports-script">{{ msg }}</div>
+</template>
+<script setup>
+const msg = 'hello from component A!'
+</script>

playground/vue-external/src-import/srcImportStyle2.vue

@@ -0,0 +1,4 @@
+<style src="/#external/src-import/style2.css" scoped></style>
+<template>
+  <div class="src-imports-style">This should be tan</div>
+</template>

playground/vue-external/src-import/style.css

@@ -0,0 +1,3 @@
+.external-src-imports-style {
+  color: tan;
+}

playground/vue-external/src-import/style2.css

@@ -0,0 +1,3 @@
+.external-src-imports-script {
+  color: #0088ff;
+}