Rails 5: CSS will not link to html - ruby-on-rails

I'm new to rails and trying to link main.css.scss to index.html.erb file in views/main.
My css file is located in app/assets/stylesheets. This is default, I did not change anything.
So in my index.html.erb file I added the following:
<%= stylesheet_link_tag "main" %>
This throwed an error which advised me to include ".css" at the end of "main". I added ".css" and ".css.scss" to the end of main. The main page loads, but without the css file.
What is the correct way to link css in rails 5?

Read the api docs here. It will help you to understand how you can link css in rails.
Also take a look at Samuel's answer. He explained it really well.

It's very simple. If you don't want to use default application.css and application.js, then create new files, like in your case main:
app/assets/stylesheets/main.scss
app/assets/javascripts/main.js
Then in your layout include those files:
<!DOCTYPE html>
<html>
<head>
<title>Foobar</title>
<%= stylesheet_link_tag 'main', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'main', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
And add those files to assets.rb:
Rails.application.config.assets.precompile += %w( main.scss main.js)
And restart the server.

Related

Unable to include a stylesheet link in my view

I'm having a problem declaring a stylesheet tag in my Rails 5 view. I have this
<%= stylesheet_link_tag 'form', media: 'all', 'data-turbolinks-track': 'reload' %>
and then in my config/initializers/assets.rb I have this at the end
Rails.application.config.assets.precompile += %w( form.css )
My file is located at app/assets/stylesheets/form.css.scss, but even after restarting my server, I get the error below
Sprockets::Rails::Helper::AssetNotPrecompiled in MyEvents#index
Asset was not declared to be precompiled in production.
Add `Rails.application.config.assets.precompile += %w( form.css )` to `config/initializers/assets.rb` and restart your server
How do I get Rails to include this stylesheet on my page?
When I changed the stylesheet tag to simply
<%= stylesheet_link_tag 'form' %>
then eveerything worked.

RoR tutorial (Michael Hartl) URI::InvalidURIError

I am following the RoR tutorial by Michael Hartl. Currently on chapter 3. My problem is that I don't get the view I see at https://www.railstutorial.org/book/static_pages#fig-raw_home_view.
Instead I'm seeing a
The URL I'm trying to enter is: "localhost:3000/static_pages/help".
The application.html.erb looks like this:
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I'm still a rookie so really don't know what to do.
You have a problem with your app's name. To the right of Rails.root in your image, you can see that your app's name is:
sample_app]
Rails.root is the path to your application's directory, and it's used as the base path for locating all the files in your project.
The Rails.root is used in the url marked bad URI. The url is illegal because urls can only contain certain characters, and a bracket isn't one of them.
Your web browser is trying to request a css file that is specified in the application layout, and rails converts the request url to a local file url using the Rails.root. Unfortunately, Rails doesn't even bother looking for the file--instead Rails stops when it sees an illegal character in the url and throws an error.

Inline CSS from the asset pipeline

A fresh Rails application has the following code in app/views/layouts/application.html.erb to include a link to the - in production - minified CSS:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
For the reason of WebPerformance I'd like to use the asset pipeline to minify and organize my CSS but inline it in the header.
How can I tell Rails to inline the CSS of the asset pipeline in the application.html.erb?
This code will do the trick:
<style>
<% css = File.read("#{Rails.root}/public#{asset_path("application", type: :stylesheet)}") %>
<%= css.html_safe %>
</style>

Bootstrap Gem Installation Issue

I have added the bootstrap-sass gem and have installed the bundle. I have gone to github and think I have followed the directions correctly to finish the install for ruby on rails. It doesn't appear to be making a difference however on my local site - no font/formatting changes have been made, even after the install.
I am using a PC, https://github.com/findingtheway/pin
Change your app/views/layouts/application.html.erb to this:
<head>
<title>Pin</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Rails uses application by default you have default which is why bootstrap is not loading.

Delete link sends "Get" instead of "Delete" in Rails 3 view

I'm using Rails 3 and have have a page that outputs a list of posts from the database. I'd like to be able to delete a post from a link.
The 2nd example below works, but the first doesn't. Anybody know why the first won't work? My view contains:
# this link sends a "GET" request which asks for the #show function
<%= link_to 'Delete', post, :method => :delete %>
# this link sends the proper "DELETE" request which asks for the #destroy function
<%= button_to 'Delete', post, :method => :delete %>
My routes file contains the following:
resources :posts
Make sure that your <head> section in the layout includes the following:
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
In Rails 3, the delete requests are being handled with the help of JavaScript to ensure that the request is being sent correctly. If you don't have the csrf meta tags and the required JavaScript code, delete links won't work. The :defaults JavaScript files include--among others--prototype.js, and application.js. The latter contains the stuff that makes the link work, but relies on the Prototype framework.
If you don't want to use the default Prototype JavaScript libraries, there are ports of application.js for several other frameworks. You can find the jQuery one here, for instance.
Buttons will still work regardless of JavaScript, as the HTML code generated with button_to includes all necessary information by itself. This is why you're seeing the button work while the link doesn't.
looks like
<%= javascript_include_tag :defaults %>
is no longer supported
http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/JavascriptTagHelpers/javascript_include_tag
Instead, you should use
<%= javascript_include_tag 'application' %>
I had the same problem in rails 5.2.3 and this helped me:
layout head:
<%= javascript_include_tag "rails-ujs" %>
config/initializers/assets
Rails.application.config.assets.precompile += %w( rails-ujs.js )
In my case, I was using following.
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
I was also using jQuery by including jQuery just below default prototype JS. That was causing some sort of conflict.
Destructive actions should be performed as a form submission - http://www.w3.org/2001/tag/doc/whenToUseGet.html#checklist
You can style the button appropriately for delete method or Use Form.
I had the same issue in Rails 6.
The solution by Romalex to include:
<%= javascript_include_tag "rails-ujs" %> in head tag &
Rails.application.config.assets.precompile += %w( rails-ujs.js ) in config/initializers/assets also worked to solve an issue with destroy_user_session in devise which would not DELETE.
So this solution also applies to this question Ruby on Rails - devise users/sign_out not working
This will work. The issue is the fact that you need to pass it the right path so the route gets it.
<%= link_to 'Delete', post_path(post.id), :method => :delete %>
In my case with Rails 5, I was using following in my layout:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
In this way:
... </title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
...
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
Try this.. its a simple change..
add this to your route.rb file
get '/lists/:list_id/comments/:id' => 'comments#destroy'
I made this change and now its working..
In my case.....
In head:
<%= csrf_meta_tag %>
In config/initializers/assets.rb:
<%= javascript_include_tag :defaults %>
Was the answer! Great call!

Resources