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
Related
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
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
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.
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
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.