我正在try 将Bootstrap Vue个加载到Laravel 5.6项目中

official docs人表示要修改webpack.config.js文件,如:

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

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

我没有网页包.配置.所以我试着用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() requires a full output file path as the second argument.

我不相信这是正确的方法.

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

推荐答案

直接在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文件.

Vue.js相关问答推荐

Vue 3 范围滑块中的多个值

TailwindCSS 为什么前者比后者重要?

在 Vuex 的状态下动态创建一个响应式数组

在 vuejs 中显示两个组件,但只显示一个,为什么?

使用上传组件而不触发 POST 请求

Vuelidate 判断true/false

Vue 和 Bootstrap Vue - 动态使用插槽

是否可以在 vue-devtools 中命名 Vue 实例?

数据更新后触发 Vue.js 事件

Vuetify - 如何在 v-data-table 中单击时突出显示行

错误 [ERR_UNSUPPORTED_ESM_URL_SCHEME]:默认 ESM 加载器仅支持文件和数据 URL - Vue 3

Vue.js 无法切换字体真棒图标

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

删除一行后刷新 Bootstrap-Vue 表

Nuxt.js - API 调用的最佳场所

所有 vue props和数据都给出错误 Property属性在 type 上不存在,带有 typescript

将 SignalR 与 Vue.js 和 Vuex 集成

Vue cli 在 css 中构建生产更改不透明度

Vue 3 – 渲染无法动画的非元素根 node

vue-router 如何使用 hash 推送({name:"question"})?