When I run the rails app, am getting an error that says cannot load such file -- less.,
I have a rails application that I'm using to load an html file., this html file has reference to bootstrap_and_overrides.css. My current rails application is using the typical application.html.erb file. Here is the code for this file
<!DOCTYPE html>
<html>
<head>
<title>MyHorders</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<h3 class="muted">blog.me</h3>
</div>
<%= yield %>
</div>
</body>
</html>
My css and assets directory structure is :
Finally my GEM env.,
Looking for inputs to quash this problem. If you will need more information, I can add it to my question., Thanks.
I think you need two gems
gem "therubyracer"
gem "less-rails"
add them to your Gemfile and run 'bundle install' then restart your server and see it should work.
I think you can also try
gem "execjs"
If you have any issue
I simply needed to restart my server. I had added several related gems to my Gemfile (less-rails, therubyracer, and twitter-bootstrap-rails) while my local server was running, resulting in the same problem seen above. So once I shut it down and restarted it again, everything loaded well.
Related
I just started a new rails 7 project with TailwindCSS using the new rails new my-app --css tailwind syntax. Tailwind CSS is working properly. I wanted to add a navbar from tailwind elements, and I followed the steps from https://tailwind-elements.com/quick-start/. The css in the navbar works, but the opening and closing of submenus (which I presume is all run by javascript) does not.
When digging into the details, I am seeing these lines in the rails s logs
Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600
ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):
I did the npm install tw-elements install and the tailwind.config.cs edits, what am I missing? Is there some conflict that with Ruby on Rails that I am not aware of? Do I really need to create a route, or is that a sign that something is not installed correctly?
Here is the application.html.erb where I am inserting my <script> line
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_importmap_tags %>
<!--here is the line I added -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
<%= render 'layouts/navigation' %>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
I did try the alternate step 4 by putting import 'tw-elements'; in app/javascript/controllers.index.js but nothing is working.
I am creating a website for a friend using ROR like and am formatting using Bootstrap. I creates a couple of static pages, for example a home page. After running bundle install and adding bootstrap css framework,and restarting the server none of the html written on any of the pages is showing up. However, the application.html.erb is rendering just fine, but it's just a simple header.
In my gem file I added:
gem 'bootstrap-sass', '3.3.7'
Next I created a custom.scss file and added:
#import "bootstrap-sprockets";
#import "bootstrap";
I then added this to my application.js:
//= require jquery
//= require bootstrap-sprockets
Here is the code from my Application.html.erb which runs just fine:
<!DOCTYPE html>
<html>
<head>
<Title>Real Life Magic Make-Believe</Title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse", id: "nav">
<div class="container">
<%= link_to "REAL LIFE MAGIC MAKE-BELIEVE", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path, id: "l1" %></li>
<li><%= link_to "About", about_path, id: "l1"%></li>
<li><%= link_to "Contact Us", contact_path, id: "l1"%></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
And here is a example of code that wont even load:
<!DOCTYPE html>
<div class= "center jumbotron">
<body>
<h1>REAL LIFE MAGIC MAKE-BELIEVE</h1>
<p>
Welcome to the home page
</p>
</body>
</div>
ben,
It's hard to tell without seeing your settings. Here are the instructions i followed and i got bootstrap working properly with rails. Let me know if you followed the instructions already if not perhaps you can post your settings so we can see what goes wrong.
http://www.rubydoc.info/gems/bootstrap-sass/3.3.7
I am using ember-cli-rails gem. I installed ember-cli-foundation-sass as an addon for ember. Everything works fine but Foundation Js module. I made a layout just for Ember like this:
<!doctype html>
<html dir="ltr" lang="<%= I18n.locale %>">
<head>
<meta charset="UTF-8">
<title>Ember</title>
<%= stylesheet_link_tag 'frontend/frontend' %>
<%= include_ember_script_tags :frontend %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I tried different settings, but none of them worked. Any help would be appreciated.
I solved the problem. I just forgot to put what it supposed to be put in Brocfile.js
I put my favicon.ico in my public folder, and it shows up on my localhost, but when I check it out on the internet, shows up instead. My app is hosted through heroku, and the domain is provided by hover. Where is this failing?
Also, in case this helps, here is the code I'm using to render the favicon:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<title>Shoulak Predictions</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
</div>
<div class="container">
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
Update
If I go to mydomain.com/favicon.ico, I do download the favicon that I uploaded. ALSO, if I go to therealapp.herokuapps.com, it shows up. I think somehow my domain provider may be providing their own?
Adding a random number in your favicon will force the update:
<link rel="shortcut icon" href="/favicon.ico?v=2" />
Once I cleared my browser cache, the favicon showed up.
I've found that it takes time for that change to show up. Something to do with browser caches or server settings or something.
I was doing Hover forwarding, not using the DNS features. Hover automatically uses their own favicon.
Please check on another browser, it will work surely. It takes time to reflect.
Below my working code.
<link rel="icon" type="image/png" href="../static/images/icon.png"/>
I found a layout at https://github.com/evenwu/pinterest-clone-layout that I would like to try. However, I have no idea how to integrate this with my existing rails project. My current layout looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
How do I use the layout from the github link?
Add gem 'haml' to your Gemfile and run bundle install.
Copy layout and stylesheets, etc. to your project.
Remember to remove your .erb layout; Rails gives .erb precedence over .haml by default.