Can anyone help with this gulp-sass error.
I'm trying to run Google's code labs which includes package gulp-sass.
[01:02:31] 'build:scss' errored after 117 ms
[01:02:31] Error in plugin "gulp-sass"
Message:
app/styles/_categories.scss
Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
╵
app/styles/_categories.scss 50:8 codelab-card()
app/styles/_categories.scss 79:1 #import
app/styles/_codelab-card.scss 18:9 #import
app/styles/main.scss 22:9 root stylesheet
Details:
formatted: Error: Expected identifier.
╷
50 │ %bg-#4285f4{
│ ^
I also encountered this problem when trying to run gulp-sass to serve the Google Codelabs example site
The problem
The sass interpolation syntax in line 50 looks like this:
%bg-#{$color}
Which unwraps $color inplace, yielding
.bg-#XXXXXX
Notice that the character '#' is an invalid indentifier in css
The fix
Convert the color to a string and then strip out the hex value (As explained in this answer)
$stripped-color: str-slice(inspect($color), 2);
%bg-#{$stripped-color} {
background-color: $color;
}
...
Related
What i do wrong?
I want to install an embedded font from ../fonts/bsb in sass file, my code:
#font-face
font-weight: normal
font-style: normal
font-family: 'birthstone'
src: url('//fonts/bsb/bsb-r.woff2') format('woff2')
url('//fonts/bsb/bsb-r.eot')
url('//fonts/bsb/bsb-r.eot?#iefix') format('embedded-opentype')
url('//fonts/bsb/bsb-r.woff') format('woff')
url('//fonts/bsb/bsb-r.ttf') format('truetype')
url('//fonts/bsb/bsb-r.svg#birthstone') format('svg')
When compiling it throws this error:
Compilation Error
Error: expected ":".
╷
6 │ url('//fonts/bsb/bsb-r.eot')
│ ^
Questions:
Why does the compiler expect ":" there?
How can I correctly put the font through sass so that it compiles
correctly into fonts.css?
we are upgrading our Angular app from version 11 to 12. Now we are running into an issue with the scss for our themes...
#use '~#angular/material' as mat;
#function mat.get-color-from-palette($palette,$hue:default,$opacity:null) {
#if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
#return mat.get-color-from-palette($palette, default, $hue);
}
while this worked fine for 11 version 12 throws an error.... :
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "(".
╷
3 │ #function mat.get-color-from-palette($palette,$hue:default,$opacity:null) {
│ ^
╵
Any idea ?
Best, Peter
We found it. Got fixed :
#function mat-get-color-from-palette($palette,$hue:default,$opacity:null) {
mat-get vs mat.get
I have a file structure like this:
---- _base-map.scss
---- _child-map-1.scss
---- _child-map-2.scss
---- _child-map-3.scss
styles.scss
styles.scss imports all the child map files:
#import './base-map';
#import './child-map-1';
#import './child-map-2';
#import './child-map-3';
So far so good.
_base-map.scss :
$base-map : (
"font-size" : 1.3rem,
"border-radius" : 0.4rem,
// ...
);
In order to use "map.merge", #use "sass:map" has to be included:
_child-map-1.scss :
#use "sass:map";
$child-map-1 : map.merge(
$base-map,
(
"font-size" : 2rem,
"border-radius" : 0.5rem,
// ...
)
);
But when I try to bundle the files with scss-bundle I get this error :
[17:22:37] erro: There is an error in your styles:
[17:22:37] erro: #use rules must be written before any other rules.
[17:22:37] erro: ╷
[17:22:37] erro: 838 │ #use "sass:map";
[17:22:37] erro: │ ^^^^^^^^^^^^^^^
[17:22:37] erro: ╵
[17:22:37] erro: stdin 838:1 root stylesheet on line (838, 1)
When I don't include #use "sass:map" the scss compiler complains about map.merge.
What's the right way to solve this?
Delete theme-style.scss
Open angular.json file and look for-
architect-
build-
styles-
remove this line- "src/custom-theme.scss"
You are all-set!
I had to change "map.merge" to "map-merge" to make it work.
Thanks to #Arkellys.
HTH someone.
Receiving an error while using a prefix on a variable imported using #use with a #forward, however using a prefix on a mixin works as expected.
Note: I've also tried to replace'-' with '_', '' and desperately removed the '$' which I figured would never work. No success.
This is written #forward "" as -*, and it adds the given
prefix to the beginning of every mixin, function, and variable name
forwarded by the module
- cite: https://sass-lang.com/documentation/at-rules/forward
Use case
_colors.scss
// Variable.
$primary-color-var: red;
// Mixin.
#mixin primary-color-mixin-example {
$primary-color: red;
}
_all-modules.scss
#forward './colors' as colors-*;
sample-component.scss
#use '../modules/all-modules' as foo;
.sample-component {
#include foo.colors-primary-color-mixin-example; // Works.
}
.sample-component {
color : foo.colors-$primary-color-var; // Throws an error.
}
Error message
Error: expected "(".
╷
6 │ color : colors.fonts-$primary-color-var;
│ ^
╵
src/sass/components/sample-component.scss 6:21 root stylesheet
Additional context
I would prefer not to use a mixin because I would like to assign the imported variable to a local variable, which doesn't seem to be possible when #including a mixin;
$local-primary-color: foo.colors-$primary-color-var;
I noticed that sass build fails on color substraction after update to laravel-mix#4.0.12
My code in app.scss
.footer {
background-color: #fefefe - #a0a0a0
}
My webpack.mix.js
const mix = require('laravel-mix');
const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';
mix
.sass(`${resourcesAssets}scss/app.scss`, `${dest}css`);
On laravel-mix#1.7.2 running npm run prod works properly, but now I got next error
ERROR Failed to compile with 2 errors22:16:34
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Undefined operation "#fefefe - #a0a0a0".
background-color: #fefefe - #a0a0a0
^^^^^^^^^^^^^^^^^
stdin 2:23 root stylesheet
in C:\xampp\htdocs\laravel-test-mix\resources\sass\app.scss (line 2, column 23)
at runLoaders (C:\xampp\htdocs\laravel-test-mix\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at render (C:\xampp\htdocs\laravel-test-mix\node_modules\sass-loader\lib\loader.js:52:13)
at Function.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:25378:48)
at vB.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:16223:16)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5284:51
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5835:52
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
How can I fix this problem without setting up previously calculated value?
Color arithmetic was deprecated in dart-sass 4.
They recommend you (in a harsh way) to use color functions.
I rather like this color functions visual summary. You are probably looking for darken(color,%) in your code.