如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?
How to load bootstrap-vue into Laravel 5 with laravel-mix?
我正在尝试将 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 文件所以我尝试加载 CSS 与 Laravel 混合
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() requires a full output file path as the second argument.
而且我不认为这是正确的方法。
将 bootstrap-vue 添加到新的 Laravel 5.6 项目中的正确方法是什么?
直接在 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
文件。
我正在尝试将 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 文件所以我尝试加载 CSS 与 Laravel 混合
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() requires a full output file path as the second argument.
而且我不认为这是正确的方法。
将 bootstrap-vue 添加到新的 Laravel 5.6 项目中的正确方法是什么?
直接在 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
文件。