I'm implementing Bootstrap 4.4 in a Rails 6 app using Webpacker and the theming isn't working in production.
I overrode some Bootstrap variables and put the custom theming in a separate file called bootstrap_variables.scss. I made sure to import Bootstrap's functions before the custom variables in the app/assets/stylesheets/application.scss file as outlined here and here.
#import "bootstrap/scss/functions";
#import "bootstrap_variables";
#import "bootstrap/scss/bootstrap";
When I run the app locally it works fine. When I try to push to production (Heroku) the build fails and I get the following error:
SassC::SyntaxError: Error: argument `$color` of `darken($color, $amount)` must be a color
on line 181:43 of app/assets/stylesheets/bootstrap_variables.scss, in function `darken`
from line 181:43 of app/assets/stylesheets/bootstrap_variables.scss
$link-hover-color: darken($link-color, 15%) !default;
That references the following lines in the custom bootstrap_variables.scss file:
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
Why might this be working locally but not in production?
Related
I need to reduce the font-size of Bootstrap's Jumbotron header in Rails.
I see here
that I need to add something like
#jumbotron-heading-font-size: ceil((#font-size-base * 2.5));
in my file
app/assets/stylesheets/bootstrap_customization.css.scss
So I changed "#" to "$", please see below how the file looks now:
$jumbotron-heading-font-size: ceil(($font-size-base * 2.5));
$jumbotron-padding: 20px;
#import "bootstrap";
But this doesn't work.
I've found a solution.
As I'm using Bootstrap 4, I had a look at
https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss
and found $display3-size variable there (this is a class for h1 tag inside Jumbotrone), so then I added the following line before #import bootstrap into my .scss file:
$display3-size: 2.5rem;
So it works now
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.
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".
I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.
I would like to stop importing my Sass files with Sprocket and using the #import function of Sass.
It works fine but the files are not imported one by one in developement mode so the debuging is harder.
Is there a way to import all files separately with Sass in developement mode?
You can enable asset debugging in Sprockets by adding the setting to your development.rb:
# Expands the lines which load the assets
config.assets.debug = true
When debug is true, compiled CSS files contain line numbers that tell you where to find the uncompiled CSS:
/* line 5, ../../../app/assets/stylesheets/_colors.scss */
.color-facebook-blue {
color: #3B5998;
}