vue 范围样式和引导程序之间的冲突

Question

我正在 vuejs 中开发一个嵌入式插件。 在开发模式下，此插件嵌入在加载引导程序的 lorem ipsum html 页面中。

我刚刚注意到，我在插件中带有“关闭”类的元素之一受到引导关闭类的影响。我想完全限定我的 Vue.js 样式，以免受到外部样式的影响（因为此插件将由客户嵌入），但也希望我的内部范围样式不会泄漏到插件之外并影响我的客户页面。

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

Answer 1

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

在您的情况下，您可以像这样使用“关闭”标签定位元素：

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