Für ein Projekt verwende ich eine Bibliothek, die ich gebaut habe, um Vue-Komponenten über die verschiedenen Anwendungen zu teilen.Auflösung npm Modul Abhängigkeiten
Also importiere ich meine Komponentenbibliothek als npm-Modul und ich fügte es der Anwendung package.json und das funktioniert gut.
Das Problem ist, dass, wenn ich versuche, etwas in der einzelnen Komponente in der Komponentenbibliothek zu importieren, die Anwendung die Abhängigkeiten dieser Komponente nicht lösen kann.
zB Komponente in der Komponentenbibliothek:
<template>
<!-- my html -->
</template>
</script>
// my script
</script>
<style scoped>
// here I import the basic style for the component:
@import "../../assets/base";
in der Anwendung package.json ich habe:
"components": "git+ssh://[email protected]:xxxxx/xxxxx/my-library.git#development",
und dann verwende ich die Komponente normalerweise in meinem Projekt wie folgt aus:
import MyComponent from "./components/MyComponent.vue";
Die Komponentenbibliothek funktioniert gut, aber wenn ich die Komponente in der Anwendung importieren, bekomme ich th e folgende Fehler von webpack:
This dependency was not found:
* -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue
To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base
Natürlich, wenn ich die @import mit dem eigentlichen CSS benötigt funktioniert alles einwandfrei ersetzen. Wie kann ich diese Konfiguration durchführen?
Haben Sie installiert und konfiguriert CSS-:
dies sein sollte, Lader? Darauf bezieht sich der Fehler. –
Warum verwenden Sie einen relativen Pfad zur Komponente? Es sollte ein 'node_modules' sein und der Import wäre' components/MyComponent.vue'. Auch der CSS-Import ist '../../ assets/base', das sind zwei Verzeichnisse oben und wenn es in' MyComponent.vue' ist bedeutet das, dass es außerhalb des Moduls gesucht wird und das wird nicht gut funktionieren. War das absichtlich? –