javascript - 如何不覆盖刀片 php 文件中的 css 文件

Question

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

应用程序.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。

标签： javascriptlaravelvue.jslaravel-5vuejs2

Answer 1

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

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

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