I am learning sass in react but I am getting this error and I can't find the answer. I have installed node-sass and everything was compiling good but when I tried to import variables I can't use them
./src/App/sass/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App/sass/styles.scss)
SassError: Invalid CSS after "...: mis-variables": expected expression (e.g. 1px, bold), was ".$default-font;"
on line 31 of src/App/sass/styles.scss
>> font-family: mis-variables.$default-font;
------------------------------^
styles.scss:
/* Variables */
#use "mis-variables";
/* SASS Code */
%no-padding {
padding: 0;
margin: 0;
}
html {
#extend %no-padding;
font-family: mis-variables.$default-font;
}
body {
#extend %no-padding;
}
_mis-variables.scss:
$default-font: 'Dosis',
Arial,
Helvetica,
sans-serif;
Node-sass causes this problem to me too. I fixed it using sass instead of node-sass.
Just run npm install sass and should work.
Related
I'm adding sass and Foundation Sites sass to a project. I created a few sample scss files to test #use statements and make sure autoprefixing is working as expected. However, I cannot figure out why the sass command is ignoring the #import statements in the foundation.scss file. I specified the load-path and it's clearly finding the file, it just doesn't respect the #imports within.
I tried specifying an additional --load-path=./node_modules/foundation-sites/** just in case sass didn't know where to look for the foundation imports, but no luck.
Note: I'm specifically not using node-sass here as it doesn't (yet) recognize the #use statements, but from what I can tell this setup should work?
Thanks for any insight!
Update: On a hunch I tried swapping out the #use for #import statements in app.scss - same results.
Update 2: added a small repo to test the problem: https://github.com/webshooter/my-sass-issue
My sass command (run via npm):
sass --load-path=./node_modules/foundation-sites/scss --style=expanded ./src/scss:./public/css
(sass version 1.23.7 compiled with dart2js 2.6.1)
app.scss:
#use "other";
#use "sample";
#use "foundation";
.app {
color: #141414;
}
.prefix-example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
_other.scss:
.other {
color: #ff9900;
};
_sample.scss:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
.sample {
font: 100% $font-stack;
color: $primary-color;
}
app.css: (output)
.other {
color: #ff9900;
}
.sample {
font: 100% Helvetica, sans-serif;
color: #333;
}
/**
* Foundation for Sites by ZURB
* Version 6.6.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
.app {
color: #141414;
}
.prefix-example {
display: grid;
transition: all 0.5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
/*# sourceMappingURL=app.css.map */
Actually i think the correct --load-path to use is : ./node_modules/foundation-sites/assets
Try to:
[ Optional ] Replace #use with #import statements in your app.scss :
#import "other";
#import "sample";
#import "foundation";
Use this to compile you sass files sass --load-path=./node_modules/foundation-sites/assets --style=expanded ./src/scss:./public/css
this should fix the import issue
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.
I am using Font Awesome 4.0.0, and want to do something like this in LESS:
.btn-github {
.btn;
.btn-primary;
margin-left: 3em;
i {
.#{fa-css-prefix};
.#{fa-css-prefix}-github;
.#{fa-css-prefix}-lg;
margin-right: 1em;
}
}
That doesn't compile with the error:
ParseError: Unrecognised input in - on line ...
Is it possible to accomplish this? It would certainly make a beautiful button for me.
There are at least 2 problems with what you are trying to do (for LESS >=1.6 see update bellow):
1) Unfortunately it is not possible to call a mixin using selector
interpolation.
With selector interpolation LESS expects the construct to be of
following format:
.#{selector-string} { property:value; }
(the interpolated selector can have also some static string pre or
post the interpolation)
so
.#{selector-string};
is Unrecognised by the LESS compiler. See more here:
How can I call a mixin by reference in LESS?
2) A ruleset with an interpolated selector gets directly printed to the CSS output and does not exist as a mixin that you could reuse in the LESS run
For example:
#foo: test;
.#{foo} {
length: 20px;
}
.bar {
.test;
}
will return:
Name error: .test is undefined
.bar { .test;}
See more on that here: LESS CSS: Reuse generated .#{name} class as a mixin
Possible solution for your problem would be redifinig the font awesome rules as some kind of reusable mixins (without using interpolation). Something like this:
#fa-var-github: "\f09b";
.fa-mixin() {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-mixin-lg() {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.fa-mixin-icon(#icon){
#var: "fa-var-#{icon}";
&:before { content: ##var; }
}
i {
.fa-mixin;
.fa-mixin-lg;
.fa-mixin-icon(github);
}
If you don't really need the variables and just want to include the rules, the best way would be just to import the compiled CSS version of the FontAwesome (see answer here):
#import (less) 'font-awesome.css';
and then you can just use the CSS rules like LESS mixins or extend their selectors as you see fit and it should work perfectly.
Update:
As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins ... so the #2 limitation form above does not apply anymore (but you still can not call a mixin dynamically with interpolation). So you can simply call LESS mixins and variables from the imported font-awesome.less file like so:
i {
.fa;
.fa-lg;
&:before{
content: #fa-var-github;
}
}
I am using Font Awesome 4.0.0, and want to do something like this in LESS:
.btn-github {
.btn;
.btn-primary;
margin-left: 3em;
i {
.#{fa-css-prefix};
.#{fa-css-prefix}-github;
.#{fa-css-prefix}-lg;
margin-right: 1em;
}
}
That doesn't compile with the error:
ParseError: Unrecognised input in - on line ...
Is it possible to accomplish this? It would certainly make a beautiful button for me.
There are at least 2 problems with what you are trying to do (for LESS >=1.6 see update bellow):
1) Unfortunately it is not possible to call a mixin using selector
interpolation.
With selector interpolation LESS expects the construct to be of
following format:
.#{selector-string} { property:value; }
(the interpolated selector can have also some static string pre or
post the interpolation)
so
.#{selector-string};
is Unrecognised by the LESS compiler. See more here:
How can I call a mixin by reference in LESS?
2) A ruleset with an interpolated selector gets directly printed to the CSS output and does not exist as a mixin that you could reuse in the LESS run
For example:
#foo: test;
.#{foo} {
length: 20px;
}
.bar {
.test;
}
will return:
Name error: .test is undefined
.bar { .test;}
See more on that here: LESS CSS: Reuse generated .#{name} class as a mixin
Possible solution for your problem would be redifinig the font awesome rules as some kind of reusable mixins (without using interpolation). Something like this:
#fa-var-github: "\f09b";
.fa-mixin() {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-mixin-lg() {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.fa-mixin-icon(#icon){
#var: "fa-var-#{icon}";
&:before { content: ##var; }
}
i {
.fa-mixin;
.fa-mixin-lg;
.fa-mixin-icon(github);
}
If you don't really need the variables and just want to include the rules, the best way would be just to import the compiled CSS version of the FontAwesome (see answer here):
#import (less) 'font-awesome.css';
and then you can just use the CSS rules like LESS mixins or extend their selectors as you see fit and it should work perfectly.
Update:
As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins ... so the #2 limitation form above does not apply anymore (but you still can not call a mixin dynamically with interpolation). So you can simply call LESS mixins and variables from the imported font-awesome.less file like so:
i {
.fa;
.fa-lg;
&:before{
content: #fa-var-github;
}
}
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.