如何通过Laravel-Mix在Laravel 5.6中引入Bootstrap-Vue？

别担心，Laravel 5.6默认采用Laravel Mix作为前端构建工具，它已经封装好了Webpack的底层配置，完全不需要你手动创建或修改webpack.config.js文件！针对Bootstrap-Vue的CSS加载需求，我们可以通过Mix轻松搞定：

步骤1：安装依赖 #

首先确保你已经安装了Bootstrap-Vue及其核心依赖：

npm install bootstrap-vue bootstrap vue --save

步骤2：调整Laravel Mix配置 #

修改项目根目录下的webpack.mix.js，保留你原本的JS和Sass编译配置即可——Mix默认已经集成了style-loader和css-loader的功能，会自动处理CSS文件的打包：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

步骤3：引入Bootstrap-Vue及CSS #

你有两种灵活的方式引入所需的样式文件：

方式一：在JS入口文件中导入

打开resources/assets/js/app.js，添加以下代码完成Bootstrap-Vue的注册和样式导入：

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';

// 全局注册Bootstrap-Vue组件
Vue.use(BootstrapVue);

// 导入Bootstrap和Bootstrap-Vue的官方样式
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

方式二：在Sass文件中统一管理样式

如果你习惯用Sass管理所有样式，可以在resources/assets/sass/app.scss中添加第三方样式的导入：

// 导入Bootstrap系列样式
@import '~bootstrap/dist/css/bootstrap.css';
@import '~bootstrap-vue/dist/bootstrap-vue.css';

// 这里可以编写你的自定义样式...

额外：合并独立CSS文件（可选） #

如果你想用styles()方法单独合并第三方CSS文件，也可以这样配置webpack.mix.js，让第三方样式和自定义样式分离：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   // 将Bootstrap相关CSS合并到独立的vendor.css文件中
   .styles([
       'node_modules/bootstrap/dist/css/bootstrap.css',
       'node_modules/bootstrap-vue/dist/bootstrap-vue.css'
   ], 'public/css/vendor.css');

所有配置完成后，运行npm run dev（开发环境）或npm run production（生产环境），Mix就会自动帮你编译打包所有资源，Bootstrap-Vue的样式就能正常生效啦！

内容的提问来源于stack exchange，提问作者Connor Leech