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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1406閲覧

Rails6でadminLTEを導入したがスタイルが適用されない

akisios

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2022/01/21 07:12

前提・実現したいこと

Railsを使い日記アプリのようなものを作っています。
管理画面を作成するにあたりadminLTEyarnにてインストールしました。
管理画面はスタイルを分けたいためadmin.scssadmin.jsを作成しそちらでadminLTEの読み込み記述をしたのですがスタイルが全く適用されません。開発者ツールエラーは
今回rail6を使用するのが初めてのためwebpackを通したこれらの設定にはつまづきましたが、奮闘の末アプリ自体にはCSS、JS共に適用されています。

まだまだ未熟なため理解が乏しい部分は多々ありますが、お力添えいただければ幸いです。
よろしくお願いいたします。

Ruby 3.0.2
Ruby on Rails 6.1.4.4
adminLTE 3.0
webpacker 5.4.3

発生している問題・エラーメッセージ

現状エラーは出ていませんが、ログに下記のような文が出ていました。

The resolved_paths option has been deprecated. Use additional_paths instead. [Webpacker] Everything's up-to-date. Nothing to do

該当のソースコード

javascript/stylesheets/admin.scss

css

1@import '~admin-lte/plugins/fontawesome-free/css/all.min'; 2@import '~admin-lte/dist/css/adminlte.min';

javacript/packs/admin.js

javascript

1import 'admin-lte'

config/webpack/environment.js

javascript

1const { environment } = require('@rails/webpacker') 2const jquery = require('./plugins/jquery') 3 4const webpack = require('webpack') 5environment.plugins.prepend('Provide', 6 new webpack.ProvidePlugin({ 7 $: ['jquery/src/jquery','admin-lte/plugins/jquery/jquery'], 8 jQuery: ['jquery/src/jquery','admin-lte/plugins/jquery/jquery'], 9 Popper: ['popper.js', 'default'] 10 }) 11) 12 13environment.plugins.prepend('jquery', jquery) 14module.exports = environment

views/admin/layouts/application.html.slim

ruby

1doctype html 2html 3 head 4 meta content=("text/html; charset=UTF-8") http-equiv="Content-Type" 5 meta charset="UTF-8" 6 meta lang="ja" 7 meta content="noindex, nofollow" name="robots" 8 = csrf_meta_tags 9 = stylesheet_pack_tag 'admin', media: 'all' 10 = javascript_pack_tag 'admin', 'data-turbolinks-track': 'reload' 11 body.hold-transition.sidebar-mini.layout-fixed 12 .wrapper 13 .content-wrapper 14 = render 'shared/flash_message' 15 = yield

javascript/stylesheets/application.scss

css

1@import 'bootstrap/scss/bootstrap'; 2@import 'flatpickr/dist/flatpickr.css'; 3@import 'top';

javascript/packs/application.js

javascript

1import 'jquery'; 2import Rails from '@rails/ujs'; 3import Turbolinks from 'turbolinks'; 4import * as ActiveStorage from '@rails/activestorage'; 5import 'channels'; 6import 'bootstrap'; 7import '../stylesheets/application'; 8import '../javascripts/flatpickr'; 9 10Rails.start() 11Turbolinks.start() 12ActiveStorage.start()

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問