0

I am new to Rails and have been struggling to fix this issue despite searching for an answer.

I have created a new app and I am trying to migrate a Theme Forest Bootstrap template into the app. I thought it would be quite simple but I have failed so far.

The files have the following code:

app/views/layouts/application.html.erb

<head>
  <!-- Meta Tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Title -->
  <title>Site</title>
  <!-- Fonts -->
  <link rel="stylesheet" type="text/css"  href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,700,900,700italic,500italic'>
  <!-- Stylesheets -->
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <link rel="stylesheet" href="css/ie.css">
  <![endif]-->
  <!--[if IE 7]>
  <link rel="stylesheet" href="css/fontello-ie7.css">
  <![endif]-->
  <%= csrf_meta_tags %>
</head>

app/assets/stylesheets/application.css

 *= require_self
 *= require_tree .
 *= require bootstrap.min
 *= require perfect-scrollbar
 *= require style
 *= require flexslider
 *= require fontello
 *= require animation
 *= require owl.carousel
 *= require owl.theme
 *= require chosen
 */

app/assets/javascripts/application.js

//= require_tree .
//= require modernizr.min
//= require jquery-1.11.0.min
//= require jquery-ui.min
//= require jquery.raty.min
//= require perfect-scrollbar.min
//= require zoomsl-3.0.min
//= require jquery.fancybox.pack
//= require jquery.themepunch.plugins.min
//= require jquery.themepunch.revolution.min
//= require flexslider.min
//= require jquery.iosslider.min
//= require jquery.nouislider.min
//= require owl.carousel.min
//= require chosen.jquery.min
//= require bootstrap.min
//= require turbolinks

For some reason this fails to load what I think is bootstrap-min.js.

I can get the page to work correctly if I remove the stylesheet_link_tag tag and replace the css links in the application.html.erb file to reflect the following:

<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="assets/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/fontello.css">
<link rel="stylesheet" href="assets/animation.css">
<link rel="stylesheet" href="assets/owl.carousel.css">
<link rel="stylesheet" href="assets/owl.theme.css">
<link rel="stylesheet" href="assets/chosen.css">

I have a feeling I will be slated for not knowing but remember I am new to this and I've got to start somewhere!

MightyQ
  • 69
  • 6
  • You may have a problem with your import order. Try putting `require_tree .` and `require_self` after all other imports, in that order – Mathieu Le Tiec Jan 31 '15 at 17:07

3 Answers3

0

You need to move your various stylesheets like bootstrap.min.css from assets/bootstrap.min.css to 'assets/stylesheets/bootsrap.min.css'.

Anything in the assets/stylesheets folder will get picked up by the asset pipeline due to this tag: *= require_tree . and included by <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> in your app. The Rails Asset Pipeline will concatenate and minify all your assets. You typically won't have to use require in your application.css other than the defaults.

Read more about the Rails Asset Pipeline here: http://guides.rubyonrails.org/asset_pipeline.html

Also I would suggest using bootstrap as a gem instead of manually including the assets. Read more here: https://github.com/twbs/bootstrap-sass

Justin D.
  • 101
  • 3
  • Thanks for your reply! All my css is in assets/stylesheets which I why i don't get why it doesn't work with the stylesheet_link_tag. – MightyQ Jan 31 '15 at 15:20
0

I have sorted it!

I think there must have been a conflict in the CSS. I

 *= require_tree .

and it is working fine now. I also found there was an issue with the JS and I removed it there too.

Not sure if this would be advisable but I welcome any constructive comments.

MightyQ
  • 69
  • 6
0

I have seen this error. It is an encoding issue with execjs. I found the solution on this thread (ExecJS::RuntimeError on Windows trying to follow rubytutorial) I opted for the option - much more satisfying!

Community
  • 1
  • 1
Yuliem Alavez
  • 63
  • 1
  • 5