我正在尝试在 Vue 组件中使用 Bootstrap,并且我希望所有 CSS 都在范围内。我试过这样的事情:
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
但它似乎并不像 css 是范围内的。有什么办法吗?
原文由 vitalii 发布,翻译遵循 CC BY-SA 4.0 许可协议
我正在尝试在 Vue 组件中使用 Bootstrap,并且我希望所有 CSS 都在范围内。我试过这样的事情:
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
但它似乎并不像 css 是范围内的。有什么办法吗?
原文由 vitalii 发布,翻译遵循 CC BY-SA 4.0 许可协议
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
4 回答1.8k 阅读✓ 已解决
更新:使用 SCSS 的 hack
第一个解决方案不起作用的原因:
您提到的模态显然不受导入引导程序的组件控制。也许它是一个子组件。也许您正在使用 Bootstrap 模态的 jquery 版本。无论哪种方式,数据属性都不会添加到模式中。
为了解决这个问题,你需要Deep Selector。 (您可以在 https://vue-loader.vuejs.org/en/features/scoped-css.html 中更详细地了解它)
下面是我将如何使用 SCSS 导入整个 Bootstrap CSS。 (我认为仅使用纯 CSS 不可能做到这一点。)
生成的 CSS 类似于
.. 这就是你想要的。
但是,我得说,导入整个 Bootstrap CSS 是一种非常糟糕的做法。尝试仅从 bootstrap-sass 导入您将要使用的内容。
这个解决方案是 hacky。但这是我所知道的唯一适用于您的用例的方法。