SCSS Compile Error

Topic: SCSS Compile Error

mail1 pro asked 8 years ago

Hi, We bought MDB Pro yesterday and have some trouble compiling the SCSS Code. Can someone take a look at this issue? https://github.com/mdbootstrap/bootstrap-material-design/issues/35 Thank your very much.

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

Hi, I think we can resolve that issue together ;) We compile MDB every day and we don't have any problems. I recommend you to use prepros. If you try it, please tell us if it works or not. It will be very helpful to us and let us resolve your problem

Add comment

mail1 pro answered 8 years ago

0 0 Best answer

Thank you very much for your answer! Do you use Prepros with libsass or ruby-sass? I've compiled MDB before with ruby-sass, which worked. Now we work with ember-cli-sass, which uses libsass and got those errors. I've tried prepros with node sass and it worked like a charm. I can't find out which node-sass version prepros is using. Any idea why prepros with node-sass works but ember-cli-sass with node-sass doesn't work?

Add comment

mail1 pro answered 8 years ago

0 0 Best answer

Update: Found out that prepros is using node-sass to 4.0 and LibSass to 3.4. I've upgraded node-sass in my project to 4.0 and checked if it really will be used ... but the error still occurs. Are there any dependencies like bourbon, compass, ... ?

Add comment

mail1 pro answered 8 years ago

0 0 Best answer

If I run node-sass directly to build the mdb.scss I also get the error, so it has nothing to do with ember, ember-cli or ember-cli-sass: /usr/local/lib/node_modules/node-sass/bin/node-sass mdb.scss produces:


{
  "status": 1,
  "file": "mdb/free/data/_colors.scss",
  "line": 314,
  "column": 8,
  "message": "("lighten-5": #fafafa, "lighten-4": #f5f5f5, "lighten-3": #eeeeee, "lighten-2": #e0e0e0, "lighten-1": #bdbdbd, "base": #9e9e9e, "darken-1": #757575, "darken-2": #616161, "darken-3": #424242, "darken-4": #212121) isn't a valid CSS value.",
  "formatted": "Error: ("lighten-5": #fafafa, "lighten-4": #f5f5f5, "lighten-3": #eeeeee, "lighten-2": #e0e0e0, "lighten-1": #bdbdbd, "base": #9e9e9e, "darken-1": #757575, "darken-2": #616161, "darken-3": #424242, "darken-4": #212121) isn't a valid CSS value.n        on line 314 of mdb/free/data/_colors.scssn>> $grey: (n   -------^n"
}

Add comment

mail1 pro answered 8 years ago

0 0 Best answer

I finally solved the issue! The problem wasn't node-sass, mdb.scss or ember, the problem was OUR app.scss which imports mdb.scss ... there are color variables which seem to confuse something (I didn't get it completly). I did some minor changes and it works. Thank you!

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago