如何仅加载特定 Vue 组件的 css 文件？

Question

我已经使用 vue 创建了一个无头应用程序，现在我需要专门为特定组件加载一个 css 文件。
在下面的代码中，我插入了 css 文件，但不幸的是它在整个应用程序中全局显示。

<script>
export default {
name: "FriendComponent",
...
}
</script>

<style>
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';
</style>

Answer 1

要将任何 CSS 文件或代码应用到特定组件，您需要添加scoped该style组件的标签。

看看这个：

<style scoped>
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';
</style>

这会将 CSS 应用于该特定组件。