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

Question

我在我正在开发的 Vue 项目中使用 Quill WYSIWYG 编辑器。

我已经通过安装了鹅毛笔npm install quill@1.3.6。文件安装到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 中导入它不会消除重复的样式（但是在您的用例中，这可能不是问题）。