Ruby Version: 2.0.0
Rails Version: 4.0.1
This is a follow-up to my previous question: Why do assets fail to load in production mode?. This was mostly fixed by setting config.serve_static_assets = true in production.rb.
However, now I still have one stylesheet and one javascript file that aren't being pulled in. which (coincidentally) should be pulling in it's own set of dependencies.
In my application.html.erb file I have:
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag "frontend", media: "all" %>
However, that seems to be parsing to two very different things. Here is the output:
<link href="/assets/application-1c1eb49916824f465443a709172a580a.css" media="all" rel="stylesheet">
<link href="/stylesheets/frontend.css" media="all" rel="stylesheet">
And in case it makes a difference, here is what frontend.css actually looks like:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree ./frontend
*= require front_end
*/
What am I missing?
In config/application.rb, add frontend.css to config.assets.precompile:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( frontend.css )
Don't forget to do this if you create other CSS and JavaScript manifest files.
Related
I am using the ruby Gem cssbundling-rails and dart-sass to process Sass in a Rails 7 app (and I am fairly new to Rails).
In the package.json file I define the build:css script:
"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=. --load-path=./node_modules --load-path=./node_modules/#rpf/sauce --load-path=app/assets/stylesheets/"
This appears to be working; I see the results of several Sass files bundled and processed into one CSS file: app/builds/application.css.
However I cannot see how to add this file to my page. We use Slim so I include the line
= stylesheet_link_tag 'application'
in the app/views/components/_head.html.slim file. That results in this fragment in the final HTML:
<link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" />
If I load that file (application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css) into my browser I see it is an empty manifest file which starts
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
and has no files listed below.
What am I missing? How do I load the CSS that was bundled and processed from Sass files into the app/builds/application.css file into my Slim page?
A simple fix is to add
link rel="stylesheet" href="/assets/application.css" type="text/css"
to app/views/components/_head.html.slim instead.
Yes, there are a million questions asking how to register a directory for the assets pipeline. But my question is slightly different...
I'm building a basic theme system and the file structure will look like this:
app/assets/skins/
some_theme/
style.css.scss
fonts/
font1.woff
font2.woff
images/
whocares.png
another_theme/
...
As you can see, the theme-specific assets are bundled in their own directories. When I new theme gets added, I don't want it to require any tinkering with the configurations.
Can I configure the asset pipeline to search/precompile ALL the files under app/assets/skins/?
I think I want something like this in application.rb...
config.assets.paths << Rails.root.join('app', 'assets', 'skins', '**')
...but this isn't how it works. How does it work?
To include all your scripts: add to your app/assets/javascripts/application.js:
//= require_tree ../skins
To include all your styles: add to your app/assets/stylesheets/application.css:
*= require_tree ../skins
Or the equivalent syntax for sass (better than using comments):
#import '../skins/**/*'
To include all other assets add to config/initializers/assets.rb:
Dir.glob( Rails.root.join( 'app', 'assets', 'skins', '**' ) ).each do |path|
Rails.application.config.assets.paths << path
end
And to access for example app/assets/skins/a_theme/skin.png you can use view helpers like:
<%= image_tag 'skin.png' %>
And in your sass files helpers like:
background-image: image-url('skin.png')
The same for fonts assets.
UPDATE: just to clear a point: with Dir.glob if 2 images have the same name in different paths only the first in paths list will be used
Up until now all of my application's CSS has been served through application.css.scss which looks like this:
/* ...
*= require jquery-ui
*= require_self
*= require_tree .
*/
#import "bootstrap";
I recently needed to create a separate, stripped down manifest file that was to serve only a single embeddable asset in our website. Unfortunately though I couldn't get the CSS file to be packaged up and processed by the asset pipeline. It kept getting put into production with a URL that looked like this:
<link href="/stylesheets/minimag.css" rel="stylesheet" />
rather than what it should have looked like with fingerprinting and precompliation which would be more like:
<link href="/assets/minimag-292d6edcd4fd2398abab273acf8.css" rel="stylesheet" />
On debugging I discovered that the manifest HAS to be called application.css
There's a good chance I'm missing something. BUT on stripping the problem back to its bare essentials I looked just at the application's stylesheet itself.
What I found was that when it was called application.css.scss, it was compiled just fine but when the name was changed it didn't get processed:
So this works:
application.html.haml
...
= stylesheet_link_tag "application"
...
together with a stylesheet called application.css.scss. In production this yields the inclusion HTML:
...
<link href="/assets/application-292d6edcd4fd6ec1da12b93fb273acf8.css" rel="stylesheet" />
...
But this does not work
application.html.haml
...
= stylesheet_link_tag "testing"
...
together with exactly the same stylesheet but now renamed to testing.css.scss. In production this yields the inclusion HTML:
...
<link href="/stylesheets/testing.css" rel="stylesheet" />
...
What makes "application.css.scss" special?
Why is this going on? Why can't I just use a manifest file that has any old name?
(if it's at all relevant I'm deploying to Heroku)
You have to add stylesheets to the precompilation if you want to use them as a standalone file.
# config/environments/production.rb
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += %w(testing.css)
I start to study Rails 3.1. However, css doesn't work.
There are some scss in app/assets/stylesheets/, but they don't appear in application.css
I create productshoge.css(not scss) but it doesn't work either.
I think "that'll automatically include all the stylesheets available in this directory" , but any css doesn't be included.
when I try to re-make new application ( rails new XXX), I met same situation.
would someone advise me?
folders
app/assets/stylesheets/
├── application.css
├── carts.css.scss
├── layout.css.scss
├── line_items.css.scss
├── products.css.scss
├── productshoge.css
├── scaffolds.css.scss
└── store.css.scss
assets.path
irb(main):001:0> y Rails.application.config.assets.paths
---
- /Users/sekai/study/depot/app/assets/images
- /Users/sekai/study/depot/app/assets/javascripts
- /Users/sekai/study/depot/app/assets/stylesheets
- /Users/sekai/study/depot/vendor/assets/stylesheets
- /Library/Ruby/Gems/2.0.0/gems/jquery-rails-3.0.4/vendor/assets/javascripts
application.css
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require productshoge.css
*= require_tree .
*/
output(view-source:http://localhost:3000/?debug_assets=1)
<html>
<head>
<title>Pragprog Booksオンラインストア</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" /><!-- <label id="code.slt"/> -->
<script src="/assets/application.js?body=1" type="text/javascript"></script><!-- <label id="code.jlt"/> -->
<meta content="authenticity_token" name="csrf-param" />
<meta content="asIA91Z9Dm0OnAPa4ki6LlWcUst/GypczrubeGSDegM=" name="csrf-token" /><!-- <label id="code.csrf"/> -->
</head>
output css
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require productshoge.css
*= require_tree .
*/
environment
development
Just update the rails version in the Gemfile to 3.2.13 and run bundle update. Also you should remove *= require productshoge.css from application.css
I hope this will help you.
Please be sure that you have included that line in /app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
You have to include CSS manually like,
app/assets/stylesheets/
* require carts
* require layout
* require line_items
* require products
* require productshoge
* require scaffolds
* require store
I have a Rails 4 application with
<%= javascript_include_tag "modernizr", "data-turbolinks-track" => true %>
in the head. In development, the following HTML is rendered, and modernizr is loaded:
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
In production, the followign HTML is rendered, and modernizr is not loaded (404 not found):
<script data-turbolinks-track="true" src="/javascripts/modernizr.js"></script>
In production, /assets/modernizr.js is found and browsable.
The Rails documentation says that the javascript_include_tag should generate
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
In production, my stylesheet_link_tags are fine, linking to the /assets/ directory.
Why is the javascript_include_tag linking to /javascripts instead of /assets in production, and how can I fix it?
One of the usage statements for AssetUrlHelper indicates it will produce /javascripts/ urls
like what you are seeing:
# asset_path "application", type: :javascript # => /javascripts/application.js
(from asset_url_helper.rb line 117 - [1])
This code looks like it can only be reached if the precompiled asset is missing
so it would appear that your asset compilation is not working (my deployments usually
fail when that happens, so maybe yours isn't even firing).
The same asset_url_helper.rb calls the /javascripts/ part 'extname' and
uses the following map to know how to generate the name:
# Maps asset types to public directory.
ASSET_PUBLIC_DIRECTORIES = {
audio: '/audios',
font: '/fonts',
image: '/images',
javascript: '/javascripts',
stylesheet: '/stylesheets',
video: '/videos'
}
A new Rails 4 app has this in the config/environments/production.rb
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
which seems to match the behavior you are seeing.
By default, Rails only precompiles application.js, application.css and any images it finds in the assets path. Therefore, in production mordernizr will not get precompiled and thus the javascript helpers will not be able to find the file.
In order to fix the issue, you can add modernizr to the precompile list by modifying the following config in production.rb
config.assets.precompile += ['modernizr.js']
For more information see the Rails Guides
Be sure to precompile your assets in production by running this command:
RAILS_ENV=production bundle exec rake assets:precompile
The Rails Guide on the asset pipeline can give you more details: http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
I have a new application using Rails 4 deployed on Heroku with :
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
my javascript application.(fingerprint).js called from the src: assets/application.js
i think your problem come from something into your production.rb who define assets from another location.
So maybe you can add Moderniz.js to
config.assets.precompile = ['.js', '.css', '*.css.erb']
in config/production.rb
Or simply require modernizr script into your application.js
//= require mordernizr
and remove the modernizr script call into your layout.
<%= javascript_include_tag "modernizr", "data-turbolinks-track" => true %>
Can you check from where your application.js is served into your production environment ?
It may be because this file needs to be in /vendor/assets/javascript instead of /app/assets/javascript. The Vendor folder is for javascript libraries, and the App folder is for your code.
A better solution than adding a tag to your layout would be adding a script reference to your application.js and let the sass compiler compress and attach it to your main javascript file.
If you don't get a definitive answer, check out:
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization