从 Vue.js 中的某些路由中排除 Bootstrap 样式

Posted 2023-02-22

【中文标题】从 Vue.js 中的某些路由中排除 Bootstrap 样式

【英文标题】：Exclude Bootstrap styling from certain routes in Vue.js

【发布时间】：2021-01-03 07:58:07

【问题描述】：

我有一个使用 cli-tool 制作的单页 vue 2 应用程序。我的大部分路线都使用 Bootswatch (Bootstrap) 样式。但根本不应该。这只是一个问题，因为 Bootstrap 会影响 body 和 html 样式，并且通常会与其他样式混淆。即使我@import scoped <style> 中的 Bootstrap 只对应该使用它的路由，路由也不应该使用 Bootstrap。如果我首先访问 Bootsrap 路线，然后再访问孤立的路线，就会发生这种情况。我应该怎么做才能让我的一条路线在造型方面完全隔离？如果这不可能或非常不切实际，请提出其他方法。如果这不是单页应用程序，这将很容易。但我更喜欢它是一个。

【参考方案1】：

我成功地将引导导入封装在一个名为“bootstrap-inside”的类中，并将其分配给应该使用 Bootstrap 设置样式的#app（例如索引路由）div。

   .bootstrap-inside 
      @import '~bootstrap/scss/bootstrap.scss';
   

从现在开始，如果你想使用 bootstrap，你只需要在你的组件/视图/布局中使用 .bootstrap-inside。

我建议为您的无引导页面创建一个视图布局，并设置您的路线以扩展该布局（如果您愿意，我也可以为您提供解决方案）。

我可以提到另一个线程的answer，关于限制引导样式的范围，以防您遇到意外的引导行为。

【参考方案2】：

我知道的最简单的解决方案是手动重置给定选择器的每个 css 属性。

您可以将 id / class 添加到页面的根元素，并显式重置其所有子元素的所有 css 属性。它会覆盖默认的引导样式，但不会替换它的类。

这是一个可以重置所有 css 属性的类：reset css for a div #15901030

虽然不太方便，但应该可以！