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?
Related
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;
}
...
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.
Error:
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/documentation.css created.
Warning: Can't parse CSS: Missing property value at line 66:21 in .tmp/styles/main.css Use --force to continue.
Line 66 points to the following code:
Source:
span {
#extent .md-body-1;
}
p {
#extent .md-body-1;
}
I can't extent a tag in scss? Or is a autoprefixer issue?
you need to use #extend not #extent