Question

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

问题是：

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

任何人都知道我如何只能为我的组件导入，以便如果用户安装了我的软件包并使用它，那么css应该仅适用于该组件，而不适用于可能破坏用户css的整个应用程序。

谢谢。

Answer 1

您可以设置CSS范围，当标签具有scoped属性时，其CSS仅适用于当前组件的元素，例如：

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

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

Answer 2

在构建依赖于其他大型软件包（如Bootstrap或任何其他CSS / JS框架）的npm软件包时，应确保其未包含在插件中。您应该让用户自己导入那些框架，而您的组件应该使用该导入的包。

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

对于您的情况，如果您绝对需要在包中包括CSS，请仅从Scoped CSS中的Bootstrap导入要求的SCSS文件，如下所示：

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