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
Related
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.
main.scss
#import "sass1";
#import "sass2";
sass1.scss
$white-color: white
sass2.scss
.body{ color: $white-color}
If I just compile one time like this, it works fine
node-sass main.scss main.css
But if I use the watcher like this, modify and save _sass2.css gives me error
node-sass --watch main.css main.css
{
"status": 1,
"file": "sass2.scss",
"line": 3,
"column": 11,
"message": "Undefined variable: \"$whites\".",
"formatted": "Error: Undefined variable: \"$whites\".\n on line 3 of sass2.scss\n>> color:$whites;\n ----------^\n"
}
I have tried to use "sass" instead of "node-sass" and it works, is it a bug of node-sass?
Finally, I figured out the problem is the file name of the partials.
We should name files with underscore prefix if we do not want it to generate its own css code.
Then the solution is to change
sass2.scss
to
_sass2.scss
. (Also change sass1.scss to _sass1.scss although it is not the problem of the error)
I found a solution on how to resize column
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
However, I'm getting this error
[16:17:17] Starting 'styles'...
[16:17:17] gulp-inject 4 files into index.scss.
[16:17:17] [Sass] Error in plugin 'gulp-sass'
Message:
no mixin named grid-column
Backtrace:
src/app/main/main.scss:110
Details:
fileName: /home/ubuntu/testapp/src/app/main/main.scss
lineNumber: 110
[16:17:17] Finished 'styles' after 35 ms
I saw grid-column in the file grid.scss but I'm not sure where to properly put my scss code.
As #akarienta's request, here is how I got it working. Without the inclusion of this import code, it won't get fixed.
#import "bower_components/foundation/scss/foundation/components/tabs";
I added that line to my own _settings.scss
then I put the code below to another scss file. It should have worked in main.scss but wondering why I didn't. I'll have to retest. Anyways, everything is working great
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
I am trying to use a mixin with a custom function. But I have always receive the same error.
error sass/app.scss (Line 58 of sass/_grid.scss: Undefined mixin 'responsive-columns'.)
My function is :
#mixin responsive-columns($suffix:''){
#for $i from 1 through $columns{
.col#{$suffix}-#{$i}{
width : $i / $columns*100%;}
}
I found out what was the problem. I think it is a stupid one.
First I have to add :
#import "compass"
in my scss file.
Then in my terminal I have to use
compass watch instead of sass --watch sass_folder:css_folder
My scss file is this:
#import "compass/typography/lists/bullets";
.view-content ul
+no-bullets
This gives me an error on the page:
Syntax error: Invalid css after " +no-bullets": expected "{", was ""
However, when the rule looks like this:
.view-content ul {
#include no-bullets;
}
then it's OK and bullets are gone.
But I like the shorthand notation, how to enable using it?
You're right, I found the related documentation.
I tried the following and it works.
Then, I tried your and it didn't work until I remove the trailing ; on the import instruction.
#import "compass/typography/lists/bullets"
.view-content ul
+no-bullets
The following works with Compass 0.12.2. Try removing the trailing ; on the import instruction.