Vue.js 可以导入 element-ui 和 Bootstrap 吗？

Posted 2023-02-23

【中文标题】Vue.js 可以导入 element-ui 和 Bootstrap 吗？

【英文标题】：Does Vue.js can import element-ui and Boostrap?

【发布时间】：2017-12-01 04:09:19

【问题描述】：

我已经导入了 element-ui 组件，但我可能需要一些常见的样式，例如 reset.css 和 Boostrap 中的其他样式。

他们可以在一个项目中同时退出而不冲突吗？

【参考方案1】：

不，你不能。大多数情况下 element-ui 用 class 改变样式，但是 Bootstrap 用 class 和 html 标签改变样式，这是矛盾的。

例如，您可以在 Bootstrap 中找到以下代码：

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;

在 element-ui 中有一个reset.css 定义如下：

h1,h2,h3,h4,h5,h6 
    color:#1f2d3d;
    font-weight:inherit

所以你不能在一个项目中同时使用 Bootstrap 和 element-ui 而不冲突。

【讨论】：

如果我想要Bootstrap的基本风格以及element-ui的ui组件怎么办？

@junlin 为什么？如果你想使用 bootstrap 作为 Vue 组件，你可以试试 bootstrap-vue bootstrap-vue.js.org 。

我使用带有元素 ui 的 bootstrap 4 reboot.scss，现在一切正常

@Shaci 请您添加更多详细信息。你是怎么做到的？你的 main.js。