如何在 vue 组件中导入 CSS 文件，范围仅限于组件？

Posted 2023-02-22

【中文标题】如何在 vue 组件中导入 CSS 文件，范围仅限于组件？

【英文标题】：How to import CSS files in vue components with scope limited to components only?

【发布时间】：2019-07-25 10:47:27

【问题描述】：

如何将 CSS 文件导入到 vue 组件中，以便这些文件的范围仅限于组件，我尝试将文件导入到具有 scoped 属性的单个组件文件中的样式选项卡中，但它仍然捆绑了所有 CSS 和覆盖另一个？有什么方法可以导入范围仅限于单个文件组件的 CSS 文件？我不希望我的 CSS 被其他组件 CSS 文件覆盖？还有一件事我正在使用 webpack cli 3。非常感谢您抽出宝贵的时间。将不胜感激。

【参考方案1】：

经过这么多的谷歌搜索和点击和轮胎，我终于找到了一个答案。我们可以在单文件组件中做这样的事情。这将使您的 CSS src 文件仅限于您的组件。感谢您的宝贵时间！

<style scoped src="@/assets/css/main.css"></style>

【讨论】：

我已经用 bootstrap 尝试过这个解决方案，但它不起作用。但是当我删除作用域属性时它正在工作

它对我也不起作用。我正在尝试从 node_modules 文件夹中包含 .css 文件。