Question

我正在开发vuejs中的嵌入式插件。在开发模式下，这个插件嵌入在lorem ipsum html页面中，加载bootstrap。

我刚注意到插件中的一个带有“close”类的元素受bootstrap close类的影响。我想完全限定我的Vue.js样式，以免受外部样式的影响（因为这个插件将由客户嵌入），但也希望我的内部作用域样式不会泄漏到插件之外并影响我的客户页面。

我想知道是否有办法这样做，例如在webpack编译期间用唯一ID覆盖类名？

Answer 1

您可以将插件包装在div#myId中，然后使用范围内的css来定位div#myId内的元素。

在你的情况下，你可以使用＆＃34; close＆＃34;来定位元素。像这样的标签：

div#myID .close{
    /* your styles here */
}