Currently, I am creating an application using Ruby on rails.
The environment uses macOS and AWS.
Before setting up a project with rails, I downloaded the layout from an external site, edited it with VScode, and created some views.
When I tried to reflect this in rails, there are many files in the layout of the external site, and I am at a loss as to how to reflect them in rails.
After investigating, I found that the plugin creates javascript and stylesheets folders in vendor/assets in rails and divides them by role, so I put it as shown in the picture below, but the layout is reflected. Was not done.
I'm sorry for the beginner's question, but I would appreciate it if you could answer.
External site layout:
https://htmlstream.com/preview/stream-ui-kit/
Structure of the original file that I want to reflect in rails this time
After changing according to the answer you received
→ The following error occurs (boostrap css file cannot be found)
File structure
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 = "excerpt from service introduction">
<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>
-
Answer # 1
Related articles
- ruby on rails - i want to reflect the partial template only when i am logged in
- ruby on rails - i want to reflect the conditional expression when the value is null in the if statement of view
- ruby on rails - [rails 6] i'm using bootstrap 4, but the layout collapses only after logging out
- ruby - i want to reflect css
- ruby - when you edit the code only in the development environment when you require an external module, if you just reload the sc
- ruby - rails bootstrap 3 column layout
- ruby on rails - i want to get data from a specific column and reflect it in the view
- ruby - jayml does not reflect on models of 2 or more
- ruby - [rails] i want to add multiple records for each date and reflect them
- ruby - 'rbenv' is not recognized as an internal or external command, operable program or batch file
- ruby - [rails] i want to change the table to reflect using conditional branching
- ruby - passing variables using render partial
- ruby - deployment error on heroku
- ruby - output the total integer value held by each user
- ruby - i want to use the search method for active hash data
- ruby - destroy action does not respond
- ruby - how do you see the rails controller relative path? (carrierwave directory deleted)
- ruby - when deploying on capistrano, i get the error "access denied for user'ec2-user' @'localhost' (using password: no)&qu
- javascript - run multiple times with js + each do
- ruby - how nice! function routes do not pass well (relation) [rails]
I tried using the asset pipeline.
(The one who uses javascript_include_tag instead of javascript_pack_tag)
Asset Pipeline-Rails Guide
Place the files under assets of the downloaded file in vendor/assets/stream.
Edit the following two files
app/assets/javascripts/application.js(If not, make it)
app/assets/stylesheets/application.scss
js global and css styles got an error if they were named as they are, so
Actually, I changed the notation of myglobal, mystyles, file name and require.
Also, on the way
Sprockets :: Rails :: Helper :: AssetNotPrecompiled
I got an error, so I added the following.(Rails5 may not give an error)
config/initializers/assets.rb
For the file read by application.js/scss, refer to the following "Starter Template"
https://htmlstream.com/preview/stream-ui-kit/docs.html