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>
Related
I have tried with gem datepicker, but i have to use datepicker without any gem of datepicker?
i have added datepicker js files like
bootstrap-datepicker.ja.js
bootstrap-datepicker.js
this file i have loaded in view(erb)
<%= javascript_include_tag 'locales/bootstrap-datepicker.ja.js', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'bootstrap-datepicker.js', 'data-turbolinks-track' => true %>
but it's not working giving error like
in console:
ActionView::Template::Error (bootstrap-datepicker.js):
error on page:
Sprockets::Rails::Helper::AssetNotPrecompiled in MUser#index
bootstrap-datepicker.js
Check if you have jquery included, otherwise you cannot use bootstrap.
try adding <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in your view above the other two scripts.
So your code should look something like this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<%= javascript_include_tag 'locales/bootstrap-datepicker.ja.js', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'bootstrap-datepicker.js', 'data-turbolinks-track' => true %>
You could also have a look at <%= form.date_field :date_attribute %> - it will use a native date picker, supported by all major browsers.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
<%= form.date_field :date, attribute: 'date' %>
where the :date is your model
So i already imported the application.scss with the tags
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
and it works
however i want to separate my css files and call them in specific views like in the home/index view call
<%= javascript_pack_tag 'home/index', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home/index', media: 'all', 'data-turbolinks-track': 'reload' %>
ive achieved this creating a separate js file such as home.js and inside just importing my home.scss like this
import '../../stylesheets/home/index'
my question is, is this the correct way?
do i always have to create a js file to import my css file?
is there a better aproach?
Yes, it's possible. You don't need to create a separate JS file, just create a CSS "pack" for each view:
app/javascript
└── packs
├── application.js
└── home.scss
In your view:
<%= javascript_pack_tag 'home', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %>
Demo app, branch with change: https://github.com/rossta/rails6-webpacker-demo/compare/example/css-pack
Caveats:
Using multiple "packs" per page (e.g. 'application' and 'home') is not typically recommended (a) in Webpacker 5. Webpack has no way of knowing that you want to share code between packs unless you add special configuration to do so (see footnote). My answer above assumes you're not duplicating imports across bundles (or you're ok with duplication).
Webpack will still create a JavaScript bundle to load your CSS bundle so you'll still need both javascript_pack_tag and stylesheet_pack_tag
a. You can share code across bundles by using the splitChunks API (Webpacker 5 docs, enabled by default in Webpacker 6).
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.
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.
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.