Why does my main scss file need to be called 'application.scss'? Why can it not be named 'foo.scss' and be included in application.html.erb?
manifest.js
// JS and CSS bundles
//
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
// Images and fonts so that views can link to them
//
//= link_tree ../fonts
//= link_tree ../images
Css import
<%= stylesheet_link_tag 'foo', media: 'all' %>
Error when i use 'foo.scss'
Asset was not declared to be precompiled in production.
Add Rails.application.config.assets.precompile += %w( foo.css ) to config/initializers/assets.rb and restart your server
If i use the file name 'application.scss' it works just fine.
Ruby on Rails precompiles the assets. The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (this will include all image assets automatically) from app/assets folders including your gems:
[ Proc.new { |filename, path| path =~ /app\/assets/ && !%w(.js .css).include?(File.extname(filename)) }, /application.(css|js)$/ ]
If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:
Rails.application.config.assets.precompile += %w( foo.js foo.css )
So this tells rails to precompile your manifest file in production mode. And this is what your error says to add that in assets.rb and restart the server.
Related
I've found several different threads on including assets in the vendor/assets directory but did not find anything that worked for me. Previously, I had all of my vendor assets in the app/ directory but moved the JavaScript to the vendor/assets/javascripts/ directory and the CSS to the vendor/assets/stylesheets/ directory.
I'm now trying to load my vendor assets both in development and production, and they're not loading at all. Here's my assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
I've also tried adding the vendor/assets/ directories to Rails.application.config.assets.paths, and that didn't help.
How can I include all of the vendor assets in the asset pipeline?
UPDATE
I got my vendor JavaScript to load by adding the following to app/assets/javascripts/application.js:
//= require_tree ../../../vendor/assets/javascripts/.
However, I'm using Sass and am still not able to get the SCSS files to load.
I finally figured it out after remembering that the Rails asset load paths and Sprockets are different systems. Here's what I did:
In config/initializes/assets.rb, I added the following lines:
# Add additional assets to the asset load path
Rails.application.config.assets.paths += [
Rails.root.join('vendor', 'assets').to_s
]
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
The first block adds vendor assets to the Rails asset path. This allows me to use vendor assets in view helpers (ex: image_tag). The second block allows my vendor JavaScript and CSS to be precompiled with the rest of my assets.
Then, I added the following line to app/assets/javascripts/application.js above //= require_tree .:
//= require_tree ../../../vendor/assets/javascripts/.
This will automatically add to my application all of the JavaScript files I put into vendor/assets/javascripts.
For the Sass, I added the following to app/assets/stylesheets/application.sass:
#import "../../../vendor/assets/stylesheets/*";
I added this line before #import "*"; so that my own application's styles will take preference. This will include all of the vendor Sass files in with my application. Then I renamed all of my vendor .css files to use the .scss extension.
Now that development is working fine, I was worried about precompilation. I ran rails assets:precompile locally, and sure enough, all of my vendor assets were included!
I would like to keep Javascript controllers (Angular) next to Rails 4 controllers, in the same folder. I added this line to the config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('app', 'controllers')
And restarted server (development env), but it didn't help. Javascript files are written in Coffee and work when in standard assets/javascripts folder.
Solved by adding one line in assets/javascripts/application.js
//= require_tree ../../controllers
I's because default require_tree . doesn't autoload all javascript files in asset pipeline, but only those in the "dot" folder of application.js, which is standard javascripts folder.
add this line to the application.js
//= require_directory .
It will include all js files in the app/assets/javascript directory recursively
I have in my application.css this:
*= require_self
*= require styles
*= require custom
*= require paggination
*= require colorbox
*= require registration
*= require ../vendor/dark
On development everything is OK but when I move to production, also some other assets must be precompiled because site looks different in production.
Does Rails precompile also other css files from assets folder, not only this required? I have many other css in assets folder.
Rails by default only precompiles application.css
If you need to add individual css files, maybe if you need specific styles on certain pages you need to add them like this.
# in config/production.rb
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += %w(frontpage.css login.css)
Note: You list only the css ending even though it's a scss file you have.
Then you can reference your stylesheets in your view files.
<%= stylesheet_link_tag "frontpage" %>
Edit: And of course don't forget to do
bundle exec rake assets:precompile RAILS_ENV=production
In both assets/stylesheets and assets/javascripts, I have a folder called admin, which has a handful of appropriate Coffeescript and SASS files.
$ cat app/assets/javascripts/admin.js
//= require jquery
//= require jquery_ujs
//= require_tree ./admin
$ cat app/assets/stylesheets/admin.css
/*
*= require_self
*= require_tree ./admin
*/
$ cat config/application.rb | grep 'assets.paths'
config.assets.paths << "#{Rails.root}/app/assets/stylesheets/admin"
config.assets.paths << "#{Rails.root}/app/assets/javascripts/admin"
After precompiling, the admin folders (and their contents) are nowhere to be seen in public/assets.
I'm probably making a fundamental mistake here; I've done very little playing with the pipeline besides the basics of images, application.js etc.
Can anyone point out what I'm doing wrong?
From what i can see, they are manifests. By default only application.css and application.js are precompiled. Other need need to be added.
You need to add them to the production.rb environment as follows (comment is from the file itself):
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( admin.css admin.js )
Also, you can ditch the config.assets.paths in your application.rb, because those paths are loaded by default.
Rails 3.2 asset precompiling appends the filename with a hash. I would like to use some of my assets outside of rails ( for a maintenance page ) I would like to include some .JS files from the precompiled asset folder.
Is there a way exclude certain files from the md5 hash that's appending to the filename?
Or otherwise make them available.
You'll find something like this in config/environments/production.rb:
# Precompile additional assets (application.js, application.css, and all
# non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
You should add any assets you want to be able to link to individually, or additional manifest files, to the config.assets.precompile array.
For example, you could make a maintenance.js manifest file containing:
//= require foo
//= require bar
Add it to config.assets.precompile:
config.assets.precompile += %w( maintenance.js )
And then on your maintenance page:
<%= javascript_link_tag 'maintenance' %>
See the precompiling assets section in the asset pipeline guide for more information.