前提・実現したいこと
laravelでbootstrapを使わず、BULMAを使用したいと考えています。
下記のサイトを参考に最後まで進めましたが理想の結果が出ませんでした。(色が変わるなど)
https://marcelvandoornen.nl/articles/how-to-install-bulma-in-laravel
https://www.5balloons.info/installing-bulma-package-on-laravel/
該当のソースコード
php
1[app.scssファイル] 2 3/ Fonts 4@import url('https://fonts.googleapis.com/css?family=Nunito'); 5 6// Bulma 7@import '~bulma/bulma'; 8
php
1[app.jsファイル] 2 3/** 4 * First we will load all of this project's JavaScript dependencies which 5 * includes Vue and other libraries. It is a great starting point when 6 * building robust, powerful web applications using Vue and Laravel. 7 */ 8 9window.Vue = require('vue'); 10 11/** 12 * The following block of code may be used to automatically register your 13 * Vue components. It will recursively scan this directory for the Vue 14 * components and automatically register them with their "basename". 15 * 16 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> 17 */ 18 19// const files = require.context('./', true, /.vue$/i); 20// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)); 21 22Vue.component('example-component', require('./components/ExampleComponent.vue').default); 23 24/** 25 * Next, we will create a fresh Vue application instance and attach it to 26 * the page. Then, you may begin adding components to this application 27 * or customize the JavaScript scaffolding to fit your unique needs. 28 */ 29 30const app = new Vue({ 31 el: '#app', 32}); 33
php
1[bladeファイル] 2 3@extends('layouts.app') 4 5@section('content') 6<div class="container"> 7 <div class="row justify-content-center"> 8 <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> 9 <div class="col-md-8"> 10 11 <a class="button is-primary">Primary</a> 12 13 <div class="card"> 14 15 <div class="card-body"> 16 @if (session('status')) 17 <div class="alert alert-success" role="alert"> 18 {{ session('status') }} 19 </div> 20 @endif 21 22 運営管理者トップページ 23 </div> 24 </div> 25 </div> 26</div> 27 28@endsection
試したこと
app.scssファイルで
@import '~bulma/bulma.sass';
という記述の形もあったので試してみましたがダメでした。
補足情報(FW/ツールのバージョンなど)
BULMAのインストールはnpmを使用しました。
他にも確認したいソースコードがありましたら教えてください
回答1件
あなたの回答
tips
プレビュー