如何在Vue组件中从node_modules导入css文件

Question

我希望将这个toastr库连接到我的组件中：

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>

如何从node_modules目录连接库的css？

- Peter Zaitsev

---

@import url("https://unpkg.com/vue-toastr-2/dist/vue-toastr-2.min.css") - user6748331

Answer 1

正如@LinusBorg在vue-loader讨论线程这里所建议的那样，您可以在<style>标签内使用src属性：

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>

- hedin

---

是的，它有效： <style src='../../node_modules/@toast-ui/editor/dist/toastui-editor.css'></style> <style scoped></style> - user956584

应该也可以在没有 node_modules 的情况下工作，只需使用 toast-ui/editor/dist/toastui-editor.css。 - dec