I have a project where I am utilizing a custom library to share Vue components across various applications.
To achieve this, I have added my component library as an npm module and included it in the application's package.json file, which is functioning correctly.
However, I am encountering an issue when trying to import a specific component within the library into a single component. The application fails to resolve the dependencies of that component.
For example, in the component library:
<template>
<!-- my html -->
</template>
</script>
// my script
</script>
<style scoped>
// here I import the basic style for the component:
@import "../../assets/base";
In the application's package.json file, I have:
"components": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6b65784c6b6578227474747474226f6361">[email protected]</a>:xxxxx/xxxxx/my-library.git#development",
Subsequently, I use the component in my project like this:
import MyComponent from "./components/MyComponent.vue";
The component library functions properly, but upon importing the component into the application, webpack throws the following error:
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
Replacing the @import statement with the actual CSS needed resolves the issue. How can I configure this setup to function correctly?