로컬 환경

Vagrant + Virtualbox + Ubuntu
PC: mac
루비 2.4.1
Rails 5.1.6.1

빠질 때까지의 절차

구현

우선, Gemfile에 쓰고 설치

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'

$ bundle install

컨트롤러와 액션 이름을 만듭니다.

$ rails g controller top 

reset.css 작성 파일 reset.scss 작성 및 작성

app/stylesheets/reset.scss

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }

  /* HTML5 display-role reset for older browsers */

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }

  body {
    line-height: 1; }

  ol, ul {
    list-style: none; }

  blockquote, q {
    quotes: none; }

  blockquote {
    &:before, &:after {
      content: '';
      content: none; } }

  q {
    &:before, &:after {
      content: '';
      content: none; } }

  table {
    border-collapse: collapse;
    border-spacing: 0; }

gem 관련을 끌기 위해 custum.scss라는 파일도 작성

app/stylesheets/custum.scss

@import "bootstrap";

Honoka 템플릿에서 검증 도구로 HTML을 복사

일본어 Bootstrap 템플릿 인 호노카 사이트는 여기 h tp // 희미한 k. 오사카/

rails를 시작하고 브라우저에서 확인

$ rails s -b 0.0.0.0 -p 3000

오류 메시지가! ! ! !

빠진 오류 메시지

결론

gem 'mini_racer'

추가하면 성공!
(Live Demo 버튼은 나중에 색이 바뀝니다)

결국 추가해야했던 것은

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'
gem 'mini_racer'　　#これ大事！

빠진 이유의 고찰

같은 단계에서 macOS 사람은 문제없이 CSS 표시되었습니다.
그건 우분투 때문입니까?

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 51926146 / 루 바이 온 - 라 ls - 어서 p rep r r dae s n - t 쐐기 rt - v4-9-1- up 테이 tho w-to-fu x
에서 조사하면
~~~~~~

~~~~~~
그래서 위의 결론에 이르렀다.

보충: js의 파일은 어떻게 했는가 하면

app/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require rails-ujs
//= require turbolinks
//= require_tree