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

Question

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

在官方的文档说,修改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项目中的正确方法是什么？

Answer 1

app.scss直接在文件中导入Bootstrap Vue样式,而不是通过mix:

// 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文件.