There are already a plethora of questions on how to resolve the above error message.
The one with the best answers seems to be Sass::SyntaxError Undefined Variable, which unfortunately is quite old already.
My current (works on Rails 4.2) solution to the problem is to #include a file called _variables.sass from every other .sass file that needs to make use of the variables such as color values or font-family definitions. It would, however, be much more convenient if the _variables.sass file could be #imported once from within application.sass (before anything else of course).
All of my attempts at accomplishing this, including using only file names starting with an underscore, have failed. My question is thus if anybody knows how to achieve SASS variables in one file being available to multiple other files with central #import statements in application.sass on Rails 4.2?
Here's proof of error message with the above described setup.
Files:
$ ls app/assets/stylesheets/
application.sass _foundation_and_overrides.sass _list_defaults.sass _phrases.sass _translations.sass _users.sass
_bidi.sass _layout.sass _pages.sass _searches.sass _user_sessions.sass _variables.sass
application.sass:
$ cat app/assets/stylesheets/application.sass
// #import 'list_defaults'
// #import 'font-awesome'
#import '_variables'
#import '_foundation_and_overrides'
#import '_bidi'
#import '_layout'
#import '_pages'
#import '_phrases'
// #import 'searches'
// #import 'translations'
// #import 'user_sessions'
// #import 'users'
_variables.sass:
$ cat app/assets/stylesheets/_variables.sass
$white: #ffffff
$dark_white: #eaeaea
$medium_grey: #eeeeee
$very_light_red: #dbaca4
$light_red: #dc7869
$dark_red: #db1f00
$very_light_green: #b2ebd2
$light_green: #83dab3
$dark_green: #008f4e
$very_light_blue: #b1d8d9
$light_blue: #64c1c4
$dark_blue: #00868b
$font_sans: 'Open Sans', sans
$font_serif: 'Vollkorn', sans-serif
$font_arabic: 'Lateef', 'Amiri', 'Times New Roman', sans
_bidi.sass:
$ cat app/assets/stylesheets/_bidi.sass
// #import '_variables'
*[lang=ar],
*[lang=fa],
*[lang=ur],
*[lang=ps]
direction: rtl
unicode-bidi: bidi-override
font-family: $font_arabic
*[lang=de],
*[lang=en],
*[lang=ku]
direction: ltr
unicode-bidi: bidi-override
Rake run:
$ rake assets:precompile 2>&1 | grep -i error
Sass::SyntaxError: Undefined variable: "$font_arabic".
Related
I tried doing their Ruby on Rails instruction for installation but when I included #import 'hamburgers' it doesn't know where to search for the file. So what I tried to do was copy the files from the '_sass/hamburgers' directory from the 'hamburgers' gem into my project.
files inside the _sass/hamburgers directory pasted in my stylesheets folder.
Even after pasting the files in my project's stylesheet folder an error still shows up.
Error states
Error: Undefined variable: "$hamburger-padding-y".
on line 4:12 of app/assets/stylesheets/_base.scss
padding: $hamburger-padding-y $hamburger-padding-x;
If I understand correctly _base.scss is connected to hamburgers.scss so there shouldn't really be any issues. Hope to get some help!! :>
EDIT:
Here's my application.scss
/*
* This is a manifest file that'll be compiled into application.scss, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/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 other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "hamburgers";
Here is also hamburgers.scss
#charset "UTF-8";
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 15px !default;
$hamburger-layer-width : 40px !default;
$hamburger-layer-height : 4px !default;
$hamburger-layer-spacing : 6px !default;
$hamburger-layer-color : #000 !default;
$hamburger-layer-border-radius : 4px !default;
$hamburger-hover-opacity : 0.7 !default;
$hamburger-active-layer-color : $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter : false !default;
$hamburger-hover-filter : opacity(50%) !default;
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
// Types (Remove or comment out what you don’t need)
// ==================================================
$hamburger-types: (
3dx,
3dx-r,
3dy,
3dy-r,
3dxy,
3dxy-r,
arrow,
arrow-r,
arrowalt,
arrowalt-r,
arrowturn,
arrowturn-r,
boring,
collapse,
collapse-r,
elastic,
elastic-r,
emphatic,
emphatic-r,
minus,
slider,
slider-r,
spin,
spin-r,
spring,
spring-r,
stand,
stand-r,
squeeze,
vortex,
vortex-r
) !default;
// Base Hamburger (We need this)
// ==================================================
#import "base";
// Hamburger types
// ==================================================
#import "types/3dx";
#import "types/3dx-r";
#import "types/3dy";
#import "types/3dy-r";
#import "types/3dxy";
#import "types/3dxy-r";
#import "types/arrow";
#import "types/arrow-r";
#import "types/arrowalt";
#import "types/arrowalt-r";
#import "types/arrowturn";
#import "types/arrowturn-r";
#import "types/boring";
#import "types/collapse";
#import "types/collapse-r";
#import "types/elastic";
#import "types/elastic-r";
#import "types/emphatic";
#import "types/emphatic-r";
#import "types/minus";
#import "types/slider";
#import "types/slider-r";
#import "types/spin";
#import "types/spin-r";
#import "types/spring";
#import "types/spring-r";
#import "types/stand";
#import "types/stand-r";
#import "types/squeeze";
#import "types/vortex";
#import "types/vortex-r";
// ==================================================
// Cooking up additional types:
//
// The Sass for each hamburger type should be nested
// inside an #if directive to check whether or not
// it exists in $hamburger-types so only the CSS for
// included types are generated.
//
// e.g. hamburgers/types/_new-type.scss
//
// #if index($hamburger-types, new-type) {
// .hamburger--new-type {
// ...
// }
// }
Per the comments, the OP requested this info though it does not answer the primary question.
Don't do any of the "ruby on rails" stuff from the official documentation.
Create app/assets/stylesheets/hamburgers.css and get the code from here (or just copy in the file). This is the dist/hamburgers.css file the documentation mentions.
In your application view (e.g., application.html.erb), in the <head> put in the stylesheet reference: <%= stylesheet_link_tag "hamburgers" %>
Put in some html markup (get from the documentation example here). Also, be sure to put the <script> code from the example (it's at the end).
When I did this, I got a fresh rails site to work exactly the same as how the hamburger author's example.html works.
As to why you get that hamburger-padding-y error, I don't think you are supposed to need to put the css AND scss files. The yarn install combined with the rails gem is probably supposed to take care of this, but I couldn't recreate the error because I couldn't get a rails server to work if I install the gem (hamburgers, which resolved to v1.1.3). I was using Ruby 2.6.2 / Rails 6.0.3.3
RESULT:
it's my first time to compiling a ruby on rails 2.0, and I have a problem with the variables in _vars.scss. The scss files are located in vendor/assets/stylesheets/scss (I located them here because was the only way they worked!) and they are calling them up in app/assets/stylesheets/application.css.scss:
#import "scss/bootstrap.scss";
#import "scss/vars.scss";
#import "scss/styles.scss";
#import "scss/fonts.scss";
#import "scss/icons.scss";
#import "scss/helpers.scss";
The problem that showed up is:
rake aborted!
Sass::SyntaxError: Undefined variable: "$screen-sm-max".
(in /var/rails/DeterminaRASIntegracio/releases/20180414113247/vendor/assets/stylesheets/scss/_styles.scss)
Thanks
The error message is pretty clear.
Sass tried to find variable $screen-sm-max on file _styles.scss but failed.
Try to add
$screen-sm-max: 42;
on file _styles.scss.
And see if that solves the problem.
I can't seem to find an answer that works for me.
The icon shows up as a box:
I'm using:
font-awesome-rails (4.6.2.0)
rails (4.2.3)
I imported font-awesome-rails in my application.scss file using:
#import "font-awesome";
and here is what I wrote for the view:
<i class="quote-left fa fa-quote-left"></i>
I've tried including it before and after bootstrap.
I also tried manually adding the font folder to the pipeline in application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Clearing the tmp folder didn't seem to do anything either.
I spent way too much time on this, please help :(
I had this issue when working with Rails 6 and Bootstrap 4 in Ubuntu 20.04.
I had set up Fontawesome this way:
First I added Font Awesome to my package.json file:
yarn add #fortawesome/fontawesome-free
Next, I imported it into my app/javascript/packs/application.js file:
require("#fortawesome/fontawesome-free")
Next, I imported it into my app/assets/stylesheets/application.scss file:
$fa-font-path: '#fortawesome/fontawesome-free/webfonts';
#import '#fortawesome/fontawesome-free/scss/fontawesome';
#import '#fortawesome/fontawesome-free/scss/brands';
#import '#fortawesome/fontawesome-free/scss/solid';
#import '#fortawesome/fontawesome-free/scss/regular';
#import '#fortawesome/fontawesome-free/scss/v4-shims';
I also added the Font Awesome 5 Rails gem to my Gemfile:
gem 'font_awesome5_rails'
and installed it in my project:
bundle install
And finally I modified where my fontawesome icons were called from this format:
<i class="fas fa-camera-retro"></i>
to this format
fa_icon('camera-retro')
But the issue was that the icons were displaying fine in development but not in production.
Here's how I fixed it:
The issue was that I needed to import the FontAwesome 5 fonts into the app/assets/stylesheets/application.scss file. So I imported this to it:
#import 'font_awesome5_webfont';
So my fontawesome import to the app/assets/stylesheets/application.scss file looked like this finally:
#import 'font_awesome5_webfont';
$fa-font-path: '#fortawesome/fontawesome-free/webfonts';
#import '#fortawesome/fontawesome-free/scss/fontawesome';
#import '#fortawesome/fontawesome-free/scss/brands';
#import '#fortawesome/fontawesome-free/scss/solid';
#import '#fortawesome/fontawesome-free/scss/regular';
#import '#fortawesome/fontawesome-free/scss/v4-shims';
This time the icons displayed properly in development as well as production.
Note: Please ensure to re-compile your assets after making these changes and restart your server.
That's all.
I hope this helps
I moved my import of font-awesome below my font import and it solved it.
from this:
#import "font-awesome";
#import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
to this:
#import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
#import "font-awesome";
Try restarting your webserver, after adding #import 'font-awesome.css' to your application.scss.
Also read these, if you haven't yet,
https://github.com/bokmann/font-awesome-rails/issues/130#issuecomment-95308175
https://github.com/bokmann/font-awesome-rails/issues?q=is%3Aissue+is%3Aclosed
I solved this issue by explicitly declaring a font-family: FontAwesome; rule in my stylesheet because a global * style was overwriting the font-family attribute for the .fa class.
I am using bower for third parties on front-end.
I have problem with iCheck component which is used in AdminLTE theme.
Here is application.sass file of my Ruby on Rails 4.2.1 server side app:
#import "bootstrap-css-only/css/bootstrap"
#import "css/AdminLTE"
#import "css/skin-purple"
/*theme AdminLTE-2.3.0*/
#import "font-awesome/css/font-awesome"
#import "iCheck/skins/minimal/_all"
#import "iCheck/skins/square/_all"
#import "iCheck/skins/flat/_all"
#import "iCheck/skins/line/_all"
#import "iCheck/skins/polaris/polaris"
#import "iCheck/skins/futurico/futurico"
#import "iCheck/skins/all"
/*javascript notifications*/
#import "pnotify/src/pnotify.core"
#import "pnotify/src/pnotify.buttons"
/* Font awesome import*/
#import "font-awesome/css/font-awesome"
/*angular modules stylesheets*/
#import "core/stylesheets/users"
There is a problem with iCheck component because in file iCheck/skins/all.css there are imports:
#import url("minimal/_all.css");
#import url("square/_all.css");
And when I precompile assets for production environment, those css files do not exist. In development mode, everything works like a charm!
Any suggestion on this?
The problem here is that your compiled css file still has the same import commands, which is referencing the minimal/_all.css and square/_all.css.
There are two solutions for this problem:
You could change the extension of all imported files to scss, and change the import directive from #import url("...") to #import "..."
Or you could copy the files, which are imported with url to your public folder, and your browser will find them (of course, they will not be minified, and i would not suggest you do use this solution)
I'm using the bootstrap-sass gem. With these instructions https://github.com/twbs/bootstrap-sass#usage Things work ok except when I want to add a new stylesheet.
application.css.scss
#import "bourbon";
#import "custom";
#import "users";
#import "font-awesome";
#import "comments";
#import "animations";
directory structure
▾ stylesheets/
animations.css
application.css.scss
classifieds.css.scss
comments.css.scss
custom.css.scss
foo.css.scss
news.css.scss
relationships.css.scss
scaffolds.css.scss
users.css.scss
But if I add foo.css.scss to /stylesheets/ and add #import 'foo' to application.css.scss
I get a wrong number of arguments (2 for 1)
(in app/assets/stylesheets/application.css.scss) error
What could I be doing wrong?
it seems sass gem changed number of arguments of Sass::Importers::Base#public_url.
New version of sass-rails-source-maps should resolve this.