web-dev-qa-db-ja.com

bootstrap-vueをLaravel 5 with laravel-mixにロードする方法は？

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（）には、2番目の引数として完全な出力ファイルパスが必要です

それが正しい方法だとは思いません。

Bootstrap-vueを新しいLaravel 5.6プロジェクトに追加する適切な方法は何ですか？

laravelwebpackvue.jslaravel-mixbootstrap-vue
9
Connor Leech

Bootstrap Vueスタイルをapp.scssファイルに直接、ミックスではなく直接インポートします。

// 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ファイルを設定する必要はありません。

12
DigitalDrifter