Как включить внешний файл CSS только для моего пользовательского компонента VUE?

Question

Я создаю компонент vue js и хочу загрузить его в npm.

Проблема заключается в следующем:

Когда я импортирую любой csn cdn третьей стороны в мой компонент, он применяетсяна весь html, а не только на мой компонент.

Кто-нибудь знает, как я могу импортировать только для моего компонента, так что если пользователь устанавливает мой пакет и использует его, то css должен быть применим только к этому компонентучем применение ко всему приложению, которое может нарушить CSS пользователя.

Заранее спасибо.

Answer 1

Когда вы создаете пакет npm, который опирается на другие большие пакеты, такие как Bootstrap или любые другие фреймворки CSS / JS, вы должны убедиться, что он не включен в ваш плагин. Вы должны позволить пользователю импортировать эти фреймворки самостоятельно, а ваш компонент должен использовать этот импортированный пакет.

Для этого вы должны удалить такие пакеты из вашего dependencies в package.json при сборке. Кроме того, вы должны упомянуть в документации вашего плагина о зависимостях, на которые он опирается.

В вашем случае, если вам абсолютно необходимо включить CSS в ваш пакет, импортируйте только необходимые файлы SCSS из Bootstrap в Scoped CSS следующим образом:

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

Answer 2

Вы можете использовать Scoped CSS. Если тег имеет атрибут scoped, его CSS будет применяться только к элементам текущего компонента, например:

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

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