仅在一个 Vue 组件中包含外部 CSS 库
Posted
技术标签:
【中文标题】仅在一个 Vue 组件中包含外部 CSS 库【英文标题】：Include external CSS library in only one Vue component 【发布时间】：2018-04-22 20:13:38 【问题描述】：我有一个包含许多组件的 Vue 应用程序。目前我在 index.html 文件的头部包含了 Font-Awesome，但实际上只有一个页面或组件需要它。是否可以将其移动到组件本身，以便仅在需要时加载？
移动这个
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
到这里
<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
export default
name: 'SingleComponent',
data: function()
return
</script>
<style scoped>
</style>
我已经尝试下载 Font-Awesome 并在上面的组件中添加一个链接标签 ^^^^ 我没有收到任何错误，但图标仍然不起作用。
【问题讨论】：
如何在vue中添加这个？ maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/…"> 【参考方案1】：在App.js的style标签中导入css文件
<style>
@import './static/css/style.css';
</style>
【讨论】：
【参考方案2】：如果您只有一个页面或组件，在<template /> 和<html /> 标记中创建您需要的内容不是更容易吗？
【讨论】：
不，我有很多组件，但只有一个需要 Font-Awesome【参考方案3】：我没有尝试将 Font-Awesome 直接包含在组件中，而是发现已经有一个名为 vue-awesome 的 Vue 包装器，所以我使用了它。
【讨论】：
这不是答案。以上是关于仅在一个 Vue 组件中包含外部 CSS 库的主要内容，如果未能解决你的问题，请参考以下文章
如何在vue js中包含jquery库以及如何调用？ [复制]