Q&A
現在、Ruby on rails を使ってアプリ作成を行なっています。
環境は、macOS、AWSを使っています。
railsでプロジェクトを立てる前に、外部サイトからレイアウトをダウンロードし、VScodeで編集を行い、ある程度のviewを作成しました。
これをrailsに反映しようとしたところで、外部サイトのレイアウトには多くのファイルがあり、それらをどのようにrailsに反映させるべきかわからず困っています。
調べてみて、railsでプラグインは vendor/assetsのなかに、javascriptとstylesheetsのフォルダを作成して役割ごとに分ける、とわかったので以下の写真のように入れてみましたが、レイアウトが反映されませんでした。
初心者の質問で申し訳ございませんが、何卒ご回答をよろしくお願いいたします。
外部サイトレイアウト：
https://htmlstream.com/preview/stream-ui-kit/
今回railsに反映させたい元ファイルの構成
いただいたご回答に沿って変更した後
→以下のようなエラーが発生（boostrapのcssファイルが見つからない）
ファイル構造
application.js // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require vendors/jquery.min //= require vendors/jquery.migrate.min //= require vendors/popper.min //= require vendors/bootstrap/js/bootstrap.min //= require js/myglobal
application.css /* *= require vendors/bootstrap/css/bootstrap *= require css/mystyles */
application.html.erb <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="サービス紹介から抜粋"> <meta name="author" content="Kanou Shimon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/vendors/font-awesome/css/fontawesome-all.min.css"> <link rel="stylesheet" type="text/css" href="assets/vendors/magnific-popup/magnific-popup.css"> <link rel="stylesheet" type="text/css" href="assets/css/mystyles.css"> <%= render 'layouts/shim' %> </head>
回答1件
0
ベストアンサー
アセットパイプラインを利用して試してみました。
(javascript_pack_tagではなくjavascript_include_tagを使うやつ)
ダウンロードしてきたファイルのassets以下をvendor/assets/streamに配置します。
vendor/assets/stream - css/ - img/ - img-temp/ - include/ - js/ - vendor/
以下のふたつのファイルを編集します
app/assets/javascripts/application.js(ない場合作ります)
//= require vendors/jquery.min //= require vendors/jquery.migrate.min //= require vendors/popper.min //= require vendors/bootstrap/js/bootstrap.min //= require js/global
app/assets/stylesheets/application.scss
/* *= require vendors/bootstrap/css/bootstrap *= require css/styles */
jsのglobalとcssのstylesは、そのままの名前だとなぜかエラーになったので、
実際にはmyglobal, mystylesとファイル名とrequireの表記を変更しました。
また、途中でSprockets::Rails::Helper::AssetNotPrecompiledエラーが出たので以下を追加しました。
(rails5ではエラーが出ないかもしれません)
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( application.js )
application.js/scssで読み込むファイルは以下の「Starter Template」を参考にしました
https://htmlstream.com/preview/stream-ui-kit/docs.html
投稿2020/11/26 22:44
総合スコア2090
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/28 07:42
2020/11/28 08:05
2020/11/28 08:09
2020/11/28 08:17
2020/11/28 08:25
2020/11/28 08:49
2020/11/29 10:04
2020/12/09 12:19
2020/12/09 13:40
2020/12/09 14:13
2020/12/09 14:20