I'd like to change the name of the file of application.css but this yields the following error:
Asset filtered out and will not be served
I'm assuming this is because somewhere in the config files, rails is told to precompile application.css, and when I change its name, the config file still looks for application.css. can someone explain to me how I would go about doing this?
I ask because I would like to learn how to create my own manifest files for different controllers.
Have you tried include your new .css file to the list: config.assets.precompile += %w( newname.css ) in 'config/environtment/production.rb'?
The joke is in that you probably on the last rails 4 version. The rails team included sprockets_better_errors gem into out of the box functionality, so it checks 'precompilability' of assets even in development mode. Prior to that, you would not see any error, until deployment to the production
Hope it helps
Related
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'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
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder
I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.
It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option
I decided to use the Sass version of Foundation4 as the CSS one is virtually impossible to edit efficiently now.
I followed the instructions here: http://foundation.zurb.com/docs/sass.html
These advised me to install the gem (no problem) then install compass then create a project, which I did in wwwroot.
All good so far. It then goes on to advise me to "download the files from Github (grab the scss/ and js/ directories) and put them into your project directory"
Now why in the name of a fish on a bicycle would the instructions advise me to do this when the previous step on the command line (compass create -r zurb-foundation --using foundation) creates a folder already in the root directory for my project - albeit named differently - that contain similar if not identical files? There's already a "javascripts" folder with "foundation" and "vendor" subfolders that contain largely the same files - although some are different sizes.
Am I missing something? The included "index.html" file reference the "javascripts" folder so why am I meant to be including "js" from the github? This is very confusing when you're new to the technology!
After following the installation instructions I now have "foundation.scss" and "app.scss" files which seem to be largely the same apart from one (app.scss) has lots commented out. Which one am I meant to use?
It seems to me that the instructions are basically out of date. It appears that I don't need "js" from github but I do need "scss". The contents of this scss folder look like they need to go into the "sass" folder created when the project is made and the "foundation.scss" file can be deleted as "app.scss" is a copy of it.
I have no idea where the base "app.scss" file is hoping to "#import foundation" from as there is no "foundation" folder created on installation/creation of project. Maybe I'm missing something but it's all very confusing. Could someone please clarify what I need to start with and what I can delete/ignore?
When you install the gem, all the proper Foundation files are installed for you in the gem cache. Compass will pull all the F4 SCSS files into your project via the #import directive from foundation.scss.
The project docs in the Github repo show the latest Compass instructions for building your F4 project.
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb
It sounds like you are mixing the Standalone instructions into the Compass ones.
If you have run this:
[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation
You don't need Github or the Standalone instructions.
The steps below outline the manual steps of building an F4 project. I think you're stuck on STEP 4, so focus on that part.
STEP 1:
Download for easy access these two archives:
Foundation Vanilla:
http://foundation.zurb.com/files/foundation-4.1.6.zip
Foundation Master:
https://github.com/zurb/foundation/archive/master.zip
CD into your www root directory:
STEP 2:
Create this file:
/config.rb
require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Switch output_style = :compact or :compressed and line_comments = false for Production (when going live).
STEP 3:
Copy/Move index.html from Foundation Vanilla into your root www directory.
Edit line 11 and change foundation.css to app.css in the style tag.
STEP 4:
Create this directory and file:
/scss/
Create app.scss - This is your site/app stylesheet and we'll import Normalize and F4 in it.
Copy this into it:
// Global Foundation Settings
// #import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
// Your own SCSS here...
If you want to override some F4 SaSS variables you will need the _settings.scss file. For now I would skip this step and leave it commented out until you are more familiar with F4.
STEP 5:
Create this directory (files automatically written here):
/css/
app.css - will be written here from /scss/app.scss by Compass. Normalize and all the F4 CSS will be inside it, plus any of your own CSS you've added.
This happens automatically, you don't need to do anything except have the required gems installed and your Compass config file from STEP 2.
STEP 6:
Create this directory and copy/move these files into it:
/js/
Copy/Move /js/foundation.min.js from the Foundation Vanilla download here.
If you need your own app.js create/place it here and link to it last in your footer.
/js/vendor/
Copy/Move /js/vendor/custom.modernizr.js from the Foundation Vanilla download into here.
Copy/Move /js/vendor/zepto.js and /js/vendor/jquery.js from the Foundation Vanilla download here.
Later, when you feel more comfortable, you can cherry pick individual Foundation JS files from Foundation Master and concatenate them into a smaller lib here as foundation.min.js.
That should do it.
Check out this file in my www repo, as it shows a working F4 setup:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html
You can also poke around there for how to integrate Grunt.js for automated build of the SCSS and JS with concatenation and minification:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js
Without being as adept as #jhauraw, I did notice something else.
I installed FOundation through the Compass app. Being a novice with Compass, I too was looking for the "foundation" folder that would contain all the various Foundation SCSS files. And when I looked at the _settings.scss file that was present, it appeared that everything was commented out. What I know understand (still as a novice towards Compass) is that the "foundation" file lives within a resource library within Compass. When needed, these files are imported when generating the CSS file. The _settings.scss file with all the commented out fields is an override file. So if you remove the comments for a particular variable or mixin, it will override the originals hidden in the Compass library. The compiled CSS seems to contain everything that's needed.