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

Posted 2023-02-22

【中文标题】如何仅为我的自定义 vue 组件包含外部 css 文件？

【英文标题】：How to include external css file only for my custom vue component?

【发布时间】：2020-02-28 09:27:56

【问题描述】：

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

问题是：

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

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

提前致谢。

【问题讨论】：

我认为你应该使用scoped属性vue-loader-v14.vuejs.org/en/features/scoped-css.html

是的，但这仅在我的课程很少时才有效，我想导入整个引导 css 库

【参考方案1】：

你可以 Scoped CSS，当一个标签有 scoped 属性时，它的 CSS 将只适用于当前组件的元素，例如：

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

.example 
  color: red;

</style>

【参考方案2】：

当您构建一个依赖于其他大型包（如 Bootstrap 或任何其他 CSS/JS 框架）的 npm 包时，您应该确保它不包含在您的插件中。 您应该让用户自己导入这些框架，并且您的组件应该使用该导入的包。

为此，您应该在构建时从dependencies 中的package.json 中删除此类包。此外，您应该在插件文档中提及您的插件所依赖的依赖项。

对于你的情况，如果你绝对需要在你的包中包含 CSS，只需要像这样在 Scoped CSS 中从 Bootstrap 导入需要的 SCSS 文件：

<style lang="scss" scoped>
@import "bootstrap/required-files"
</style> 

【讨论】：

嗨 Harsh，感谢您的回复，但是当我在作用域内使用 @import 时，在样式化后使用该组件时不会应用 css。我需要在 vue.config.js 中配置一些东西吗 -> 之前我在做 module.exports = css: extract: false 但这是在添加 css globaly

您是在组件内从 CDN 导入 CSS 吗？