前提・実現したいこと
Railsを使い日記アプリのようなものを作っています。
管理画面を作成するにあたりadminLTE
をyarn
にてインストールしました。
管理画面はスタイルを分けたいためadmin.scss
、admin.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()
あなたの回答
tips
プレビュー