css - 有没有更好的方法来包含 npm 安装的 CSS 文件？

Question

我在我正在处理的 Vue 元素中使用 Quill 所见即所得编辑器。

我已经通过 npm install quill@1.3.6 安装了 quill。文件安装到 node_modules/quill/。

当导入 JavaScript 时，我在需要它的组件中 import Quill from 'quill'，但为了包含 CSS，我在我的 Vue 组件中有一个部分，如下所示:

<style scoped>
    @import '../node_modules/quill/dist/quill.snow.css'
</style>

这对我来说很好 - 但我不确定这是包含这些文件的最佳方式/如果有更好的方式。有没有更好的办法？我不确定通过 node_modules 目录访问它们是否是执行此操作的“专业”方式，或者这种方法是否存在任何问题

Answer 1

这是正确的方法，但是您通常可以从路径中省略 node_modules，因为 Webpack 默认会搜索此路径(除非您另外配置):

<style scoped>
    @import 'quill/dist/quill.snow.css'
</style>

或者，您可以像导入任何其他模块一样在 JavaScript 代码中导入 CSS:

<script>
    import 'quill/dist/quill.snow.css'
</script>

如果您以这种方式导入它，那么您可以确定 CSS 只会被捆绑一次，而如果您将它导入到您的多个 CSS 文件中，我认为在 CSS 中导入它不会删除样式。元素(但在您的用例中这可能不是问题)。