I want to connect this toastr-library into my component:
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style>
/* HOW TO IMPORT `toastr.css` FROM NODE_MODULES HERE?
</style>
How to connect library's css from node_modules directory?
There are multiple ways of including a css file in your vue app. The way I prefer is to have a single css file import inside the main. js file for your vue app. You can have multiple scss/css files which you can import in this main/styles.
To add global CSS in Vue. js, we can import our global CSS file in main. js . import "./assets/css/main.
Vue has three common approaches to styling apps: External CSS files. Global styles in Single File Components ( . vue files).
As @LinusBorg suggested here in vue-loader discussion thread, you can use src
-attribute inside <style>
-tag:
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style src='toastr/build/toastr.min.css'></style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With