如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中？答案

【问题标题】：How to load bootstrap-vue into Laravel 5 with laravel-mix?如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中？
【发布时间】：2018-09-17 12:47:22
【问题描述】：

我正在尝试将Bootstrap Vue 加载到 Laravel 5.6 项目中

official docs 说要修改你的 webpack.config.js 文件，例如：

+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }

Webpack 文档：https://webpack.js.org/guides/asset-management/#loading-css

我没有 webpack.config.js 文件，所以我尝试使用 Laravel mix 加载 CSS

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');

这给我一个错误

mix.combine() 需要完整的输出文件路径作为第二个参数。

我不相信这是正确的做法。

将 bootstrap-vue 添加到新的 Laravel 5.6 项目中的正确方法是什么？

【问题讨论】：

标签： laravel webpack vue.js laravel-mix bootstrap-vue

【解决方案1】：

直接在 app.scss 文件中导入 Bootstrap Vue 样式，而不是通过混合：

// app.scss
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";

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

Laravel Mix 已经配置了 CSS 加载器，因此您无需设置单独的 webpack.config.js 文件。

【讨论】：

明白了！谢谢