Home>

how to reflect the layout downloaded from the external site in ruby on rails?

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>
rubyonrails ruby
  • Answer # 1

    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.

    vendor/assets/stream
--css /
--img /
--img-temp /
--include /
--js /
--vendor /

    Edit the following two files

    app/assets/javascripts/application.js(If not, make it)

    //= 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 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 waySprockets :: Rails :: Helper :: AssetNotPrecompiledI got an error, so I added the following.
    (Rails5 may not give an error)

    config/initializers/assets.rb

    Rails.application.config.assets.precompile + =% w (application.js)

    For the file read by application.js/scss, refer to the following "Starter Template"
    https://htmlstream.com/preview/stream-ui-kit/docs.html

Related articles