Конфликты между стилями с областью видимости vue и бутстрапом

Я разрабатываю встроенный плагин в vuejs. В режиме разработки этот плагин встраивается в html-страницу lorem ipsum, которая загружает бутстрап.

Я только что заметил, что на один из моих элементов внутри плагина с классом «close» влияет класс закрытия начальной загрузки. Я хотел бы полностью ограничить область видимости моих стилей Vue.js, чтобы на нее не влияли внешние стили (поскольку этот плагин будет встроен клиентами), но также хочу, чтобы мой внутренний ограниченный стиль не просачивался за пределы плагина и не влиял на мои страницы клиентов.

Я хотел бы знать, есть ли способ сделать это, например, переопределив имена классов с уникальными идентификаторами во время компиляции веб-пакета?


webpack vue.js webpack-style-loader
person Pierre Clocher    schedule 14.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете обернуть свой плагин в div#myId, а затем использовать CSS с ограниченной областью видимости для нацеливания на элементы внутри этого div#myId.

В вашем случае вы можете настроить таргетинг на элемент с помощью тега «close» следующим образом:

div#myID .close{
    /* your styles here */
}
person Jose Garrido    schedule 14.12.2017
comment
Да, это то, чем я занимаюсь. Но это не мешает внешнему CSS воздействовать на мой элемент .close, а это моя проблема! - person Pierre Clocher; 14.12.2017
comment
Если вы используете те же имена классов, что и Bootstrap, и не хотите конфликтовать с их классами, почему бы вам не использовать другое имя класса? - person Jose Garrido; 15.12.2017