Laravelmixで開閉ボタンが開閉しなくなったorレイアウトが崩れている、、
Q&A
Closed
解決したいこと
元々vue.jsを利用したいと思い、npx mixコマンド等を利用してvue2⇨vue3にグレードアップし、package.jsonを書き換えるなどして導入を試みたところ、ログインの開閉ボタンが動作しなくなりましたので開閉するようにしたいです、、
見た目のレイアウトも多少崩れているのでbootstrapが読み込めていないのかと考えました、、
元々は以下のように開閉しましたが、
npx mix実行後以下のように動作しなくなりました。↓↓
考えられる原因と試した事
npx mixでデプロイを実行したところインストールするモジュールが足りないといと出力されたので
npx mix
Additional dependencies must be installed. This will only take a moment.
Running: npm install sass-loader@8.* sass resolve-url-loader@^3.1.2 postcss@^8.1 --save-dev --legacy-peer-deps
言われた通り、installしました。
npm install sass-loader@8.* sass resolve-url-loader@^3.1.2 postcss@^8.1 --save-dev --legacy-peer-deps
自分で試したこと
ネット調べるとbootstarapが読み込まれていないのではないかという意見が散見されたので、コンパイル元のjsファイルとscssファイルを確認したのですが、読み込んでいるので問題ないかと思うのですが、、
require('./bootstrap');
上記で読み込まれないのかと考え書き換え,ビルドしましたが事態は前身しません。
resource/js/app.js
require('./bootstrap');
↓↓
import 'bootstrap';
resource/css/app.scss
@import '~bootstrap/scss/bootstrap';
読み込み先のブレードファイル
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
assetをmixに変えたりもしましたがダメでした、、
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
{{-- <script src="/js/app.js"></script> --}}
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
scssもjsもbootstapがインストールされているので動作するかと思いましたが、音沙汰なし、、
laravelmix
packag.json差分
"test": "tests"
},
"dependencies": {
- "package.json": "^2.0.1"
+ "axios": "^0.21.1",
+ "bootstrap": "^5.0.2",
+ "jquery": "^3.6.0",
+ "package.json": "^2.0.1",
+ "popper.js": "^1.16.1"
},
"devDependencies": {
- "laravel-mix": "^6.0.0"
+ "@vue/compiler-sfc": "^3.1.4",
+ "laravel-mix": "^6.0.0",
+ "resolve-url-loader": "^4.0.0",
+ "sass": "^1.35.1",
+ "sass-loader": "^12.1.0",
+ "vue": "^3.1.4",
+ "vue-loader": "^16.3.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
}
webpack.mix.jsの差分
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
+|--------------------------------------------------------------------------
+| Mix Asset Management
+|--------------------------------------------------------------------------
+|
+| Mix provides a clean, fluent API for defining some Webpack build steps
+| for your Laravel application. By default, we are compiling the Sass
+| file for the application as well as bundling up all the JS files.
+|
*/
mix.js('resources/js/app.js', 'public/js')
- .sass('resources/sass/app.scss', 'public/css');
+ .sass('resources/sass/app.scss', 'public/css')
+ .vue();
・バージョン等
Laravel: Framework 8.18.1
bootstrap: 5.0.2
laravel-mix: 6.0.0
vue: 3.1.4
何か考えられる不具合など指摘していただければ幸いです。vueやbootstarapなど理解が浅い部分が多いにありますのでその点はご愛嬌でお願いします。