有没有更好的方法来包含 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>

这对我来说很好 - 但我不确定这是包含这些内容的最佳方式 files/if 还有更好的方式。有没有更好的办法？我不确定通过 node_modules 目录访问它们是否是 "professional" 的方法，或者这种方法是否存在任何问题

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 文件（但在您的用例中这可能不是问题）。

Is there a better way to include CSS files installed by npm?