如何不覆盖刀片 php 文件中的 css 文件答案

【问题标题】：how to not override the css file inside the blade php file如何不覆盖刀片 php 文件中的 css 文件
【发布时间】：2019-05-27 09:53:36
【问题描述】：

在 laravel 上的 app.js 上，我导入了一个库 bootstrap-vuejs，它使用的是 Bootstrap 4

app.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //Bootstrap 4.3.1
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

const app = new Vue({
    el: '#app',
});

然后在我的刀片 php 文件中，我刚刚调用了它

<script src="{{ asset('js/app.js')}}" defer></script>

我的刀片 php 文件有一个 Bootstrap 版本 3.3.7，因为我使用的是 laravel 管理模板 admin-lte

问题是当我刷新页面时，字体/图标会在页面加载时变大。

但是页面加载后最终会变成这个样子

当我在我的 app.js 上评论引导 css 时

//import 'bootstrap/dist/css/bootstrap.css' (Bootstrap 4.3.1)

问题已解决，但我无法在我的 vue 组件中使用引导 css

知道如何解决这个问题吗？因为我认为我的 app.js 中的引导程序覆盖了我的刀片 php 文件中的 boostrap 3.3.7。

【问题讨论】：

你使用的是Bootstrap-Vue，它是建立在Boostrap4之上的，我建议你摆脱/不使用admin-lte，自己或者你自己做管理面板'以后会遇到更多这些兼容性问题。在 Bootstrap4 中自己编写 admin 很容易。 Flex CSS，即 bs4 中的 flex-row 和 flex-column 非常棒，例如 - laratt.niiknow.org 代码 github.com/niiknow/laratt-api/blob/…

标签： javascript laravel vue.js laravel-5 vuejs2

【解决方案1】：

尝试在您需要的组件中导入引导 css。

在vue组件中，style标签中，当它有scoped属性时，CSS将只适用于当前组件。

<style scoped>
  @import 'path/to/bootstrap_verison.min.css';
  /*CSS styles*/
</style>

【讨论】：