I am trying to compile a .sass file using the node-sass module from a nodejs application. However the compile fails with an Invalid CSS Error.
Here is my SCSS:
body {
background: rgb(255, 0, 0);
}
Here is the full error message:
Original Error: { [Error: Invalid CSS after "body {": expected "}", was "{"]
status: 1,
file: 'C:/localhost/NodeJS-Server/private/sass/style.sass',
line: 2,
column: 7,
message: 'Invalid CSS after "body {": expected "}", was "{"',
formatted: 'Error: Invalid CSS after "body {": expected "}", was "{"\n on line 2 of private/sass/style.sass\n>> body { {\n ------^\n' }
I have no idea where this second '{' comes from.
SCSS files use the .scss extension, not .sass. The two formats have a different syntax.
Read about the differences here: https://responsivedesign.is/articles/difference-between-sass-and-scss
Related
When running ng serve I have this result:
*./src/main.ts - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
*./src/polyfills.ts` - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
This angular version
Angular CLI: 14.0.6
Node: 16.16.0
Package Manager: NPM 8.14.0
OS: win32 x64
Angular: 14.0.6
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1400.6
#angular-devkit/build-angular 14.0.6
#angular-devkit/core 14.0.6
#angular-devkit/schematics 14.0.6
`#angular/cdk 14.0.5`
#angular/material 14.0.5
#nguniversal/express-engine 7.1.1
#schematics/angular 14.0.6
`rxjs 6.6.7`
typescript 4.6.4
/.component.scss
input[type=text]:disabled {
color: black;
}
.search-row {
.form-group > label {
font-size: 1.1em !important;
color: black;
}
}
.mat-table {
th.mat-header-cell {
font-size: 1.1em !important;
color: black;
}
}//<< here line 17.
#block {
margin: 0% 10%;
}
...
thank you for your help
For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.
In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.
I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.
{
...
"projects": {
...
"my-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"src/scss/style.scss",
"src/app/components/playlistDetail/playlist-detail.component.scss",
...
]
}
},
Then I could see Sass error as following.
./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/#ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
╷
89 │ #media screen and(max-width: 767px) {
│ ^
╵
src\app\components\fan\fan.component.scss 89:26 root stylesheet
Run the following command
npx browserslist --update-db
For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.
for me the error was that i had an $dark-color variable that is undefined.
I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.
I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.
I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false
This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve
I tried to compile scss but error below. how i can to solve this
#import 'material-kit/variables';
^
Expected end of text, found '#' (at char 521), (line:16, col:1)
I try to run
✗ gulp build:dist
and i get this error:
events.js:160
throw er; // Unhandled 'error' event
^
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc (.)
File: /Users/eladb/.../public/js/min/vendor.js
Line: 110474
It has no stack in my code, so i have opened vendor.js at line 110474
all i saw is an error in css of 3rd party component.
})(window, window.angular);
.lf-ng-md-file-input {
margin-top: 5px;
margin-bottom: 5px;
}
.lf-ng-md-file-input .lf-ng-md-file-input-preview-container {
how can i fix it if it's not my css code?
I just can't seem to get this right.
In my rails app I am using ActionCable, it has issues with sending over URLs in partials. To fix this I am going to let the CSS do the work of setting the image, only to allow the image to be set dynamically I am going to need to have access to the view hence the fact this has to be inline css.
.message
%a.message_profile-pic{ :href => "", {:style=>"background-image:url('avatar.png')" } }
I have an image called avatar.png in my app/assets/images directory just as a test. It's an empty a-tag for now but it will become a link_to once I sort out the profile sections of the app.
I am getting the following error:
SyntaxError - syntax error, unexpected ')', expecting =>
...nd-image:url('avatar.png')" } )}></a>\n #{
How do I set this? I am using Rails 5 rc1 and Ruby 2.3 with bootstrap.
Note:
I have also tried the new HAML syntax with the same result:
%a.message_profile-pic{ :href => "", style: {background-image: "url('avatar.png')"}}
Edit
Here is what better errors is showing me:
Full stack trace looks like this:
SyntaxError - syntax error, unexpected ')', expecting =>
...nd-image:url('avatar.png')" } )}></a>\n #{
... ^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: unknown regexp option - a
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected $undefined
));}\n </a>\n <span class='message_timestamp'>\n #{
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected keyword_class, expecting keyword_do or '{' or '('
));}\n </a>\n <span class='message_timestamp'>\n #{
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected $undefined
));}\n </a>\n <span class='message_timestamp'>\n #{
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected '}', expecting tSTRING_DEND
));}\n </span>\n <span class='m...
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: unknown regexp options - pa
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected $undefined
...n class='message_star'></span>\n <span class='message_conte...
... ^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected keyword_class, expecting keyword_do or '{' or '('
...ge_star'></span>\n <span class='message_content'>\n #{
... ^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected $undefined
...<span class='message_content'>\n #{
... ^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected '}', expecting tSTRING_DEND
));}\n </span>\n</div>\n", -2, f...
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: unknown regexp options - dv
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected $undefined
));}\n </span>\n</div>\n", -2, false);::Haml::Util.h...
^
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: unterminated string meets end of file
/Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected end-of-input, expecting tSTRING_DEND:
You can do something like this:
:style => "background-image: url(#{image_path "avatar.png"})"
To find more about image_path.
I have tried to append the values using +_ in less, but it throws the error
expected '}' but found '{'
in the dotless compiler. What did I miss?
.gradient(#brow){
#{brow}+_: ~"; background: #{brow}linear-gradient(top";
// some content
}
}
The error indicates in this lineL #{brow}+_:.