vue 组件样式问题答案

【问题标题】：vue component styling issuevue 组件样式问题
【发布时间】：2020-07-30 22:46:10
【问题描述】：

我在我的组件中导入了一些 css 文件。

<template>    
    <link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css">
    <link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css">
...
<template>

问题是我希望这些样式应用到这个组件上。它们会影响其他父模板和兄弟模板。是否可以将其应用于一个模板的元素？

【问题讨论】：

标签： css scope vue-component

【解决方案1】：

如果你正在编写 .vue 单文件组件，你可以使用这个：

<style scoped src="./something.css">
</style>

【讨论】：

【解决方案2】：

您可以尝试在组件中导入您的 CSS

<style scoped>
@import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css")
@import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css")
...your CSS...
</style>

我在 Vuejs 中也使用 Fontello，您是否尝试使用自己的图标？

【讨论】：

是的，坦率地说我曾经使用过这种方法。