css - 如何仅为我的自定义 vue 组件包含外部 css 文件?

标签 css vue.js npm vue-component

我正在构建一个 vue js 组件并想上传到 npm。

问题是:

当我在我的组件中导入任何第 3 方 css cdn 时,它会应用于整个 html 而不是仅应用于我的组件。

有谁知道我如何只为我的组件导入,这样如果用户安装我的包并使用它,那么 css 应该只适用于这个组件而不是应用到整个应用程序,这可能会破坏用户的 css。

提前致谢。

最佳答案

您可以使用 Scoped CSS,当标签具有 scoped 属性时,其 CSS 将仅应用于当前组件的元素,示例:

<template>
  <div class="example">hi</div>
</template>
<style scoped>
 @import url;

.example {
  color: red;
}
</style>

关于css - 如何仅为我的自定义 vue 组件包含外部 css 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58670131/

相关文章:

javascript - 在 Bootstrap 模态中创建滑动效果

html - vue提交按钮数据

javascript - 如何更好地保存数组中所有对象的子对象?

node.js - Node 找不到模块 ~/package.json (已关闭)

node.js - 错误 : internal/modules/cjs/loader. js :968 throw err; node module?

css - 我的专栏不断相互碰撞

python - CSS 未加载到 Django 模板中。在本地运行时有效

typescript - Vue "Cannot access ' __WEBPACK_DEFAULT_EXPORT_ _'"引用组件时

npm install : FetchError: request to http://registry. npmjs.org/... 失败,原因:读取 ECONNRESET

html - div不并排 float