How to import css file from node_modules in Vue-component

Question

I want to connect this toastr-library into my component:

my-component.vue

<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?

@import url("unpkg.com/vue-toastr-2/dist/vue-toastr-2.min.css") — user6748331
– user6748331, Commented Nov 18, 2017 at 11:56

hedin · Accepted Answer · 2017-11-18 12:02:51Z

13

As @LinusBorg suggested here in vue-loader discussion thread, you can use src-attribute inside <style>-tag:

my-component.vue

<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>

edited Nov 18, 2017 at 12:02

answered Nov 18, 2017 at 11:53

hedin

1,02410 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user956584 Over a year ago

yup its work: <style src='../../node_modules/@toast-ui/editor/dist/toastui-editor.css'></style> <style scoped></style>

dec Over a year ago

Should also work without node_modules simply with toast-ui/editor/dist/toastui-editor.css.

Collectives™ on Stack Overflow

How to import css file from node_modules in Vue-component

my-component.vue

1 Answer 1

my-component.vue

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my-component.vue

1 Answer 1

my-component.vue

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related