I am trying to require "font-awesome.scss" in the application.css of my Rails 4 app like this:
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require 'font-awesome.scss'
*= require_tree .
*= require_self
*/
'font-awesome.scss' imports a bunch of files that look like partials, with a preceding underscore. One of these partials (_variables.scss) defines a variable that I need to define as of the moment I get the following error message:
Sass::SyntaxError (Undefined variable: "$fa-css-prefix".
(in /Users/bla/rails_projects/Homepage/app/assets/stylesheets/_bordered-pulled.scss:4)):
app/assets/stylesheets/_bordered-pulled.scss:4
app/views/layouts/application.html.erb:35:in `_app_views_layouts_application_html_erb__3531690645719711557_70221015865520'
What am I doing wrong?
Just do this:
*= require font-awesome
No need to put the quotes or extension.
More docs on the subject here: http://guides.rubyonrails.org/asset_pipeline.html
you can use font awesome without the gem, just use their cdn.
This goes in your layout, application.html.erb
<head>
...
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
</head>
More info here: http://fortawesome.github.io/Font-Awesome/get-started/
Try checking how you are precompiling assets. Check initializers/assets.rb (or it may be environments/production.rb for you) to make sure you are precompiling assets in a friendly way, like this:
config.assets.precompile += ["*.js", "*.scss", "*.jpg", "*.png"]
I was having this same error when it was
config.assets.precompile += [/.*\.png/,/.*\.ico/,/.*\.jpg/,/.*\.js/,/.*\.scss/]
Related
This question already has answers here:
After gem update: test fail with "Asset was not declared to be precompiled in production"
(4 answers)
Closed 6 years ago.
I want to include the assets/stylesheets/work.scss file in view/work/index.html.erb
I've check this question
How to include a css or javascript in an erb that is outside the layout?
and add this in layout/application.html.erb
<head>
...
<%= yield(:header) if content_for? :header%>
</head>
Then, add this in index.html.erb
<% content_for :header do -%>
<%= stylesheet_link_tag 'work' %>
<% end -%>
However, it threw this error
I was doing this in development mode instead of production, why I need precompile?
Because you are including it independently, and not including it in your application.css. The default for the asset pipeline is to compile applicaiton.css/application.js and anything that is included in those files.
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require c3
*= require purecss
*= require_self
*= require pure_css_reset
*/
If you want it to be seperate and not compiled into the one monolithic file, being called from your stylesheet_link_tag, you have to manually add it to the precompile array.
http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets is a good reference.
I cant seem to figure out what i am doing wrong. I have added custom files. I have tried to override the current ones.
application.css.scss
#import 'bootstrap-sprockets';
#import 'bootstrap';
/*
* 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
i should be able to just add another style sheet correct?
What i had to do was add
#import '<insert file name here>'
It then worked.
I used to put everything into application.css before and it worked. But now I wanted to use some nice dropdown menus in my app and the css for it is huuge. So I made a new css file just for the dropdown menus in the same folder where application.css is: stylesheets
It seems now that rails does not load the newly created css file. How can I make it load every file in the folder?
Use the default application.css file, it includes all .css files in the assets directories:
/*
* 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 .
*/
put those two lines into application.css:
*= require_self
*= require_tree .
*= require tree . will require all css files in app/assets/stylesheets , lib/assets/stylesheets and vendor/assets/stylesheets
I am followed the directions on the workflow from this post, but I am getting the following error:
Undefined variable: "$zindex-navbar".
(in /Users/thalatta/code/aviary-hours/app/assets/stylesheets/_navbar.scss)
Here is the stack trace:
app/assets/stylesheets/_navbar.scss:13
app/views/layouts/application.html.erb:7:in `_app_views_layouts_application_html_erb___2018644895263320512_70131537402780'
app/controllers/application_controller.rb:25:in `block in <class:ApplicationController>'
Now the variable $zindex-navbar is most definitely in my _variables.scss partial. Here is it in the file:
$zindex-navbar: 1000 !default;
which is in my app/assets/stylesheets dierectory and is #imported by my bootstrap.scss file
in the following line:
#import "variables";
which, bootstrap itself is imported by my application.css.scss file here:
#import "bootstrap";
Now my concern is that it is not loading all of my dependencies properly and I am not sure how that happened.
application.css.scss
/*
* 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 .
*/
#import "bootstrap";
Is the problem that the application.css.scss is of .scss extension and therefore is not called in the stack trace from application.html.erb? How can I properly set up my assets to load the built in dependencies that twitter-bootstrap has (i.e. all of the #import <partialname> lines in the bootstrap code)
Thank you so much for your help.
Ever yours,
Micha'el.
I'm using sass imports to handle most of my styles for our rails 3.2 app. My application.css.scss file looks like this:
application.css
/*
*= require_self
*= require_tree ./vendor
*= require admin
*/
admin.css.scss
// Reset
#import "global/reset";
// General Variables
#import "admin/general/_variables";
// Main Elements
#import "admin/general/_typography";
// Layout
#import "global/_layout";
#import "admin/general/_gridset";
// Modules
#import "admin/modules/_table";
#import "admin/modules/_forms";
#import "admin/modules/_buttons";
// Styles
#import "admin/_style-clean";
#import "admin/_style-images";
// Features
#import "admin/features/features";
Error message: Sass::SyntaxError - Undefined variable: "$body-bg".
(in /var/www/apps/dev_wbs/releases/20130624191222/app/assets/stylesheets/admin/_style-clean.css.scss)
_variables.css.scss (imported) contains $body-bg, and it is referenced in _style-clean.css.scss
I originally had this in the sass syntax, but every time we push to the dev server, we get an error of Sass::SyntaxError - Undefined variable: "$body-bg". The variable is declared in the variables file, and the error comes from the _style-clean scss file. I've dropped this variable into the style-clean file, but then I get another variable error, but it refers to one in the typography file, which is above the style-clean, making me think somehow that the assets are being pre-compiled and then added.
I'd like to go back to using sass syntax, but both scss and sass throw variable errors.
All individual files are currently in the format of: _variables.css.scss.
Any help would be appreciated!
The asset pipeline relies on application.css to tell it what files to include. Changing it to SASS probably wouldn't allow that to work.
Also, your application.css needs to tell Ruby where to look for files:
/*
* 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 .
*/
If you put the code you pasted in your question into a new file like global.css.scss and recreate the application.css in /app/assets/stylesheets/ you should be off to the races both with the above code and SASS styles as well.