如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49710595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load bootstrap-vue into Laravel 5 with laravel-mix?
提问by Connor Leech
I am trying to load Bootstrap Vueinto a Laravel 5.6 project
我正在尝试将Bootstrap Vue加载到 Laravel 5.6 项目中
The official docssay to modify your webpack.config.jsfile like:
在官方的文档说，修改webpack.config.js文件，如：
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
Webpack 文档：https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
我没有 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');
This give me an error
这给了我一个错误
mix.combine() requires a full output file path as the second argument.
mix.combine() 需要一个完整的输出文件路径作为第二个参数。
and I'm not convinced it's the right way to do it.
我不相信这是正确的做法。
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
将 bootstrap-vue 添加到新的 Laravel 5.6 项目的正确方法是什么？
回答by DigitalDrifter
Import the Bootstrap Vue styles in your app.scssfile directly, instead of through mix:
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 already has the CSS loader configured so you don't need to set up a separate webpack.config.jsfile.
Laravel Mix 已经配置了 CSS 加载器，所以你不需要设置单独的webpack.config.js文件。
