Situation
Use bower In .bowerrc
In bowerrc set directory vendor/assets/bower_components
In config application.rb I typed config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Install gallery plugin called «fotorama», do it by bower
All files of plugin «fotorama» now storage in this directory "/vendor/assets/bower_components/fotorama"
In manifest css file application.css I type *= require fotorama/fotorama.css
In layout file I typed <%= stylesheet_link_tag "application" %>
Starting server rails server — everything is ok. In source of generated page I see <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" />. This css file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}, and many other lines where uses url for file "fotorama.png", and it is ok, browser try to find this png file near the css file, and successfully do it.
Stop server, precompile all essets rake assets:precompile, and then run server in production environment rails server -e production
Problem
In production, all my css files concatenated, and in source of page it looks like this <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" />, and still this file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}. Now browser trying to find png file here http://localhost:3000/assets/fotorama.png, but it isn't here, it isn't anywhere, because, I don't know why, there is no "fotorama.png" in "public/assets" folder.
Questions
Why pictures didn't transport from "/vendor/assets/bower_components" to "public/assets"
Have you got an idea, what can I do to solve my problem? Important, that I don't want to change urls in css manually, programatically — ok.
Excuse me for my english, and thanks for everybody who going to help me.
Solution and answers
Only files from "app/assets" transports to "public/assets" by default. To transport images from "/vendor/assets" type in "application.rb" this code config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Task for gulp: if you see some changes in "bower.json", take all main files of bower components by npm moudle called "main-bower-files". Generate a manifest file with each css file with .erb extension, and save it "app/assets/stylesheets/bower_components_manifest.css"
This task continue: in every main css files, by npm module called "gulp-css-url-adjuster", add before every url <%= asset_path ' plus path to directory, and after ' %>. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>"). Add .erb extension and save.
In "app/assets/stylesheets/application.css" I add * require bower_components_manifest.
One of the other solutions, use gem "bower-rails". But I don't like it, because in some plugins in bower I need override some "main" files, and gem "bower-rails" can't do this, npm "main-bower-files" can. And I like to save my workflow for everything what I have done before start include my code to rails, gulp, bower.
Related
I have a Rails and ExtJS application which has all images under
MyApplication/app/assets/graphics
The styles are listed in the following file->
MyApplication/app/assets/stylesheets/css/styles.less
The following file seems to have a compiled version of all styles
MyApplication/app/assets/stylesheets/css/lt.css
I added a new image test.png under graphics folder. How can I compile this into the styles? So far, when I refer to this image in my code, it doesn't show up since it is not in the lt.css file.
Thanks!
UPDATE
Sorry, I didn't see that you have css folder within stylesheet folder.
According to Rails Guide, 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 += ['admin.js', 'admin.css', 'swfObject.js']
SASS & LESS both uses asset helpers asset-url($relative-asset-path) except that SASS is equipped with rails by default, so you could use this helper in your lt.less or lt.scss ( file extension is important )
background: image-url('test.png');
Just change your lt.css to .less or .scss and the image will show up, and it will be precompiled for you, after using asset helper.
In case that you want to compile to production run this from your terminal before deployment:
rake tmp:cache:clear
rake assets:precompile RAILS_ENV=production
I hope it helps
I have an external css, javascript and Images files in a separate project and wanted to include in my new rails project. Here is my structure of folders:
external-assets/js/ <Files>
external-assets/js/plugin/<Files>
external-assets/css/<Files>
external-assets/css/plugins/<Files>
external-assets/images/<some Folders>/<Files>
external-assets/images/<Files>
So, I copied external-assets/js folder to app/assets/javascript and for css I copied external-assets/css to app/assets/stylesheets.
and replace <link rel="icon" href="external-assets/css/plugins/bootstrap.min.css"> to <%= stylesheet_link_tag "/plugins/bootstrap.min.css" %> in my html.erb file. I followed the same thing for other css files and js files. When I start the server I got this error:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style.css )` to `config/initializers/assets.rb` and restart your server
After searching on SO post like: Asset filtered out and will not be served: add `config.assets.precompile and
Asset filtered out and will not be served. I need to mention my all js and css files to config.assets.precompile.
Questions
1) Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
2) What about If I put them in public folder? Is it good approach?
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.
No.
Sprockets has the require directives which concatenate any files you "require" into your application file...
#app/assets/javascripts/application.js
//= require x
What you want? Probably not... but it at least gives you the ability to call one file (application), whilst benefitting from the content of all the others.
2) What about If I put them in public folder? Is it good approach?
No.
Precompiling assets puts the minified versions into public/assets anyway.
3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?
image_tag
Assets
I think you're getting confused about the role of "external" assets.
If an asset is truly external (such as Google's JQuery repo), you'll be able to reference them by using the javascript_include_tag or stylesheet_link_tag respectively:
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %>
This will basically add the following to your layout at runtime:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If this is what you want, you'll be best adding the external repos calls to your #app/views/layouts/application file (as above).
-
Rails Assets
However....
They're obviously not "external" assets if you have them stored locally.
So you're either going to have to call them from their real external repositories, or use them locally in your app.
If you're happy using them locally (which carries the responsibility of keeping them updated), you may wish to look at Rails Assets:
This is a gem repository (you have to add source https://rails-assets.org to your Gemfil), which allows bundler to ping their server for asset-based gems.
It is meant to work like Bower - taking any of the public repos and converting them into gems. It allows you to call external repos into your app:
#Gemfile
gem "rails-assets-jquery.easing"
#app/assets/javascripts/application.js
//= require jquery.easing
This will basically store a local version of the JS / CSS you wish to use in your asset pipeline, allowing you to include it with the sprockets require directive.
The big difference is that since these assets are downloaded through the gem system, they will be updated each time you run bundler.
We use it, and although it can be a little tricky sometimes, it's well worth it.
Either put it all into the public directory, and then use the html <script>, <link>, ≤img> tags to reference the assets. You will lose some Sprockets features like minification and digesting, but that's not a big deal.
Mention all the assets in the application.css / application.js, or create a new manifest file, e.g. custom.css / custom.js, list the assets to use here and then add those two files into the:
Rails.application.config.assets.precompile += %w( custom.css custom.js )
Do you have require _ tree in your application.js & application.css?
If not, just add it to both files and restart your server.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.
Check out this guide
Hope it helps. :)
I have style.css file in my assets/stylesheets directory and in the html I'm using<%= stylesheet_link_tag "/stylesheets/style.css" %>. I tried inspect element to check it, and css file is not being included.
Your problem has the hallmarks of a Rails asset pipeline problem
Do you have an application.css.erb with something like this? It's created by default and serves as the backbone for the CSS aspect of the asset pipeline in rails.
/* ...
*= require_self
*= require_tree .
*/
Using the asset pipeline means that a call like "/stylesheets/style.css" would never be valid in production and should be avoided in code.
If you're seeing this problem in production, did you rake your assets to build the fingerprinted filenames?
The raked filenames are mangled to something like: /assets/style-4dd5b109ee3439da54f5bdfd78a80473.css, so you can see why using the filename "style.css" will not work.
# Rake assets for production
$bundle exec rake assets:precompile RAILS_ENV=production
Debug
To me step 1 is making sure your pipeline is setup to serve CSS assets. Until that works, your CSS will be broken. I would ask you to first check on the application.css.erb, to make sure your app includes your CSS tree in the pipeline. Then run the production rake, this will tell you what is happening with your CSS assets. If you post the output to your question, then we could see which, if any CSS is being included in your app.
Required reading for anyone doing Rails apps is the Asset Pipeline guide
Have you tried this?
<%= stylesheet_link_tag "style.css" %>
or
<%= stylesheet_link_tag "style" %>
Go to your config/initializers/assets.rb and include this in the file 'Rails.application.config.assets.precompile += %w( users.css )' , without the quotes, then restart your server.
I'm a ruby and rails novice so please have patience with me.
I have a SASS file (stats.css.scss) in rails that is loaded correctly in my development enviroment, but doesn't get loaded in my production enviroment. I know is the asset pipeline that is causing this, but have made several attempts and couldn't figure out what is wrong. Here's what I got:
In my site/app/assets/stylesheet folder I have the stats.css.scss file
The index.html.erb file is loading the SASS file like this:
<%= stylesheet_link_tag "stats", media: "all" %>
When I check the source code for the page loaded (Ctrl+U in google chrome) in development enviroment, I see this
<link href="/assets/stats.css?body=1" media="all" rel="stylesheet" />
which is what I expected, as it does look like the JS included in the asset pipeline. But in production enviroment the source code shows this
<link href="/stylesheets/stats.css" media="all" rel="stylesheet" />
Anybody can help me figure out what am I missing? Thanks!
Advice: don't compile assets in production. It's not necessary and prone to problems.
Since you haven't mentioned it, I'm going to guess you don't have stats.css added to the precompile config. Add the following to config/application.rb
config.assets.precompile += %w( stats.css )
The Rails Guide now suggests doing it like this in config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( stats.css )
Why is this necessary? From the guide:
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)$/ ]
In other words, if you want stats.css.scss to be precompiled at any point, you need to explicitly tell Sprockets to do so.
I'm new to ruby on rails, and currently following Michael Hartl's tutorial and unfortunately get stuck on chapter five when I try to call the #import "bootstrap"; in the custom.css.scss file.
I get the following error:
Sprockets::Rails::Helper::AssetFilteredError in StaticPages#home
Showing /Users/name/Documents/Rails_projects/sample_app/app/views/layouts /application.html.erb where line #5 raised:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )` to `config/initializers/assets.rb` and restart your server
(in /Users/name/Documents/Rails_projects/sample_app/app/assets/styleshee
/custom.css.scss)
Extracted source (around line #5):
line 5: stylesheet_link_tag "application", media: "all"
Having combed the internet I’ve tried the following solutions, none of which worked
the suggestion provided above for the assets.rb file
restarting the server with control+c
moving the gem file ‘bootrap-sass’into the section in gem file for
assets not required in product
changing the extension name of the application.css file to
application.css.scss
directly calling #import “bootstrap”; in the application.css.scss
file
adding to config.ru the following: require 'bootstrap-sass' #require
statement of bootstrap-sass
These are all solutions I found on the web, but none work.
Appreciate any help!
Thank you!
Don't know if you were able to get the issue sorted out, but this is what I did to get things working.
the error
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )` to `config/initializers/assets.rb` and restart your server
tells you to actually put
Rails.application.config.assets.precompile += %w( glyphicons-halflings.png )
in your
config/initializers/assets.rb path
After I did that, I got another similar error but this time with another line to be added.
Rails.application.config.assets.precompile += %w( glyphicons-halflings-white.png )
Now, you also need to make sure that you the #import "bootstrap"; line in your application.css file in path app/assets/stylesheets/ directory and rename the file to application.css.scss
After putting these above both Rails.application.config.assets.precompile lines in the config/initializers/assets.rb file and then restarting the server, it actually worked for me. Hope it helps!
Another way of integrating bootstrap with Rails 4.x is:
download the bootstrap version you want. unzip the file and save it in your local machine. Then move the documents to the relevant folders in your asset pipeline. Like this:
move all javascript files (the file extension ends with .js) to app/assets/javascripts
move all css files(file extension ends with .css) to app/assets/stylesheets
move all images to app/assets/images.
inside the app/assets/stylesheets, create a custome file custom.css. you can use the file to override bootsrap functionality. you won't need the #import method.
you also don't need to add a gem in your in your Gemfile. just download the version of bootstrap you want and follow the directions above.
I believe the tutorial uses bootstrap 2.3