I am trying to create custom bootstrap by importing only the required components into a style.scss file from bootstrap sass. However, I get a chain of many Deprecation Warnings when I import and compile the 3 required components.
SCSS:
#import "./bootstrap-4.3.1/scss/functions";
#import "./bootstrap-4.3.1/scss/variables";
#import "./bootstrap-4.3.1/scss/mixins";
Console Warning (first of the many):
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
298 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
bootstrap-4.3.1\scss\_variables.scss 298:31 #import
style.scss 3:9 root stylesheet
I am using the following versions of tools:
Bootstrap: 4.3.1, Sass: 1.33.0 compiled with dart2js 2.13.0
Is anything wrong with using this version combination, or any other issue? How can I resolve it?
I found a solution here.
Essentially, what I understand is that a new version of SASS is throwing warnings. You can downgrade your version to stop the warnings for now and doing so shouldn't break anything either.
tl:dr You should use Sass: "1.32.13" instead.
If You wanna hide the warrning this issue
You can review sass options from Sass-lang
and add the best option for your sass
In my case, I have this issue
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
So I added "quietDeps" option to my sass
.pipe(sass({
outputStyle: 'compressed',
quietDeps: true
}).on('error', sass.logError))
and worked correctly after run my tasks again
You can use the sass-migrator for fix division problems, it able to replace all place the / with math.div and also include the #use "sass:math";
https://sass-lang.com/documentation/cli/migrator
Related
In one of the SCSS stylesheets in our project, we import two stylesheets from the WordPress Gutenberg components
#import '#gutenberg-components/button/style.scss';
#import '#gutenberg-components/date-time/style.scss';
(#gutenberg-components is an alias for ./node_modules/#wordpress/components/src).
These stylesheets use the Sass function darken for some colors. This is fine when we build our CSS using LibSass. But when we use Dart Sass instead, we get this error:
SassError: This function isn't allowed in plain CSS.
╷
152 │ color: darken(#cacccd,10%);
The Sass docs say something ambiguous about darken.
Because darken() is usually not the best way to make a color darker, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, darken($color, $amount) can be written color.adjust($color, $lightness: -$amount).
I understand this to mean Dart Sass won't transpile darken properly, and you need to replace it with color.adjust if you're using Dart Sass. Is that correct?
Another confusing thing is that Gutenberg already seems to be using Dart Sass. Yet they apparently don't get this error in their project, because they're still using darken. How do they make it work for them?
I am having troubles with SASS #use. How does css file contain the #use from SASS? And it keeps saying $font-size is not defined.
Note: It still works if I use "#import" and SASS version when I ran "npm sass -v" is 8.20. Thank you! Sorry for using picture, I cannot get the code format right.
I want to change bootstrap's default theme-colors with SASS , the problem is when I change a color and compile , it gives me invalid CSS value error.
I've read the docs and saw some tutorials on YouTube but I can't see where is the problem
I'm using bootstrap 5.1.0 , sass 3
this is my scss file:
#import "../../node_modules/bootstrap/scss/variables";
$theme-colors: (
"primary": //some color here,
);
#import "../../node_modules/bootstrap/scss/bootstrap";
and this is the error I get in terminal
PS F:\Coding\projects\sepehr\client\src\styles> sass style.scss custom.css
Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0,
"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid
CSS value.
╷
94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
│ ^^^^^^^^^^^^^
╵
You need to import functions and mixins too...
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/mixins";
Also see: Bootstrap 5 - Custom theme-colors not updating classes
This is weird, as this works with #import, but as they plan to remove #import, the docs suggest using #use. This code does not work using #use, it is still missing dependencies when using #use.
Finally I found the error:
It happens, when you mix different Versions of Bootstrap, example 5.02 (or older) and 5.2. or 5.1.0
Beware that your scss --load-path does not cover older bootstrap-versions or fragments from it!
It causes functions.scss to be loaded from the older versions. These do not yet contain a map-loop function. The error above must actually mean that the function map-loop was not found! This is the compiler (or the error message to it) crap.
I have my application.css.scss set like this:
#import "base/variables";
#import "./application/application";
Like the documentation says I am not using Sprockets' directives (require, require_tree, and require_self) at all so I expect my variables defined inside of base/_variables.scss to be globals and available for my /application/application.scss file but it's not the case:
#content {
margin-top: $big;
}
Will return the error Undefined variable: "$big".
I've tried the same thing with SASS by naming by files application.css.sass and /application/application.sass and while the variables now do seems to be globals I'll like to keep using the SCSS syntax, I've tried that by setting config.sass.preferred_syntax = :scss but I'm still being asked for Sass.
Of course I could just import my variables file everytime I need my variables but that would go against the DRY principle.
Is that possible to use the SCSS syntax while making my variables globally available? What am I missing here? Thanks in advance.
What versions of sprockets, rails and sass-rails gems do you have? There were some problems around undefined variables, maybe try to bump up sass-rails and sprockets (if possible).
My application/application.scss was being precompiled (in assets.rb) by an old rule using a wildcard, which I missed, it's now working correctly.
After updating rails from 3.2.3 to 3.2.14, and updating twitter-bootstrap-rails from 2.2.0 - 2.2.6 I'm getting this Less unrecognised input error:
Less::Error - Unrecognised input
(in /Users/andrew/rails/teebox_network/app/assets/stylesheets/bootstrap_and_overrides.css.less):
(gem) less-2.4.0/lib/less/parser.rb:74:in `block (2 levels) in parse'
at finish (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:475:in `'
at tree.importVisitor.run (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/import-visitor.js:25:in `'
at Parser.parser.parse (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:484:in `'
The offending lines appear to be first 2 in bootstrap_and_overrides.css.less.
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
// Glyphicons
#import "twitter/bootstrap/sprites.less";
Googling suggested to downgrade to 2.2.0, however the error remains. I am running less-rails (2.4.2), sass-rails (3.2.6), therubyracer (0.12.0). If anyone needs any other gem versions just shout.
Do I have to update a critical gem to fix this issue?
The issue is with less-rails and not with bootstrap. It seems the less syntax has changed. A lot of people seem to have this problem right now: https://github.com/metaskills/less-rails/issues/71 has details.
The suggestion there, which works for me, was to make sure you use the older version of less-rails for now.
gem 'less-rails', '2.3.3'
in my Gemfile solved the issue for me.
I never got to the bottom of this issues, but as I didn't require access to the bootstrap mixins I reinstalled twitter-bootstrap-rails but ran the static stylesheets generator, so I wasn't using Less anymore.
rails generate bootstrap:install static