質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2591閲覧

BULMA CSSフレームワークの実装

j.f15

総合スコア23

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/04 08:29

前提・実現したいこと

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を使用しました。

他にも確認したいソースコードがありましたら教えてください

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phper.k

2020/09/04 08:39

npm run dev は行ったんでしょうか?
j.f15

2020/09/04 08:44 編集

返信ありがとうございます。 変更がある度にnpm run devは行うようにしています。
phper.k

2020/09/04 08:44

@import '~bulma/bulma.sass'; ならば、ここのパスが間違っているんでしょうね
j.f15

2020/09/04 09:06 編集

そこの指定するパスってなんのファイルを指定すべきなんでしょうか? 自分はsassファイルを指定すると考えており、 '~bulma/bulma.sass'という記述にしているのですが、サイトによっては '~bulma/bulma'という記述方法もあり良く理解できていないという状況です。
phper.k

2020/09/04 08:55

node_modules からそのまま辿っていくパスと同じです。
j.f15

2020/09/04 08:55

補足ですがディレクトリを見ると '~bulma/bulma.sass'のパスは 'プロジェクトファイル> node_modules >bulma >bulma.sass'となっています。
phper.k

2020/09/05 06:03

@import '~bulma/bulma.sass'; となるはずですね。
j.f15

2020/09/07 01:05

すみません。原因がわかりましたが、自分のchromeのキャッシュが原因でした… わざわざこんなしょうもない自分のミスに時間を割いていただき本当にありがとうございました。
guest

回答1

0

自己解決

原因がわかりましたが自分のGoogle Chromeのキャッシュが原因でした。

投稿2020/09/07 01:05

j.f15

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問