Vaadin 7 to 8 migration: scss compiler error

I am trying to upgrade vaadin version from 7 to vaadin 8, following this guide (https://vaadin.com/docs/v8/framework/migration/migrating-to-vaadin8.html) on “mvn clean install” getting following error:-

[ERROR]
 Nov 13, 2018 6:04:12 PM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: encountered "!important". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through" "in" "from" <STRING> <NUMBER> <IDENT> <NOT_FUNCTION> <FUNCTION> 
[ERROR]
 org.w3c.css.sac.CSSParseException: encountered "!important". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through" "in" "from" <STRING> <NUMBER> <IDENT> <NOT_FUNCTION> <FUNCTION> 
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.styleRule(Parser.java:2203)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.topLevelDeclaration(Parser.java:591)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.parserUnit(Parser.java:487)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.parseStyleSheet(Parser.java:122)
[ERROR]
 	at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:172)
[ERROR]
 	at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)

Based on that error message, looks like the Sass compiler has found an !important somewhere in your theme where it’s not expecting one. I don’t really understand how the migration would cause this, as the Sass compiler should be the same both in Vaadin 7 and Vaadin 8. So without any further information, I’d recommend going through your theme and perhaps disabling parts of it until you can narrow down what’s causing the theme compilation to fail.

I’m also upgrading vaadin version from 7.7.15 to vaadin 8.9.2 and have same kind of error:

[INFO]
 --- vaadin-maven-plugin:8.9.2:compile-theme (default) @ jufo-portlet ---
[INFO]
 Updating theme VAADIN/themes/jufotheme
[ERROR]
 Nov 07, 2019 11:38:28 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: Error when parsing file 
[ERROR]
 /home/pj/IdeaProjects/jufo/jufo-portlets/src/main/webapp/VAADIN/themes/jufotheme/jufotheme.scss on line 944, column 25
[ERROR]
 Nov 07, 2019 11:38:28 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: encountered ";". Was expecting one of: "-" "," "[" "%" "." "and" "or" "not" ":" "#{" "through" "in" "{" <IDENT> <HASH> 
[ERROR]
 org.w3c.css.sac.CSSParseException: encountered ";". Was expecting one of: "-" "," "[" "%" "." "and" "or" "not" ":" "#{" "through" "in" "{" <IDENT> <HASH> 
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)	
And the error come from
	  /* piilotetaan indikaattoreita järjestyksessä. Tää on uberhack, koska vaadin-table ei salli
   header-cellien omia tyylejä */

  .v-table-panelistTable .v-table-header-cell:nth-child(19),
  .v-table-panelistTable .v-table-cell-content:nth-child(19) {
	  @media all and (max-width: 1380px) {
		display:none;
	  }
  }

display:none in the middle.

I’m also upgrading vaadin version from 7.7.15 to vaadin 8.9.2 and have same kind of error:

[INFO]
 --- vaadin-maven-plugin:8.9.2:compile-theme (default) @ jufo-portlet ---
[INFO]
 Updating theme VAADIN/themes/jufotheme
[ERROR]
 Nov 07, 2019 11:38:28 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: Error when parsing file 
[ERROR]
 /home/pj/IdeaProjects/jufo/jufo-portlets/src/main/webapp/VAADIN/themes/jufotheme/jufotheme.scss on line 944, column 25
[ERROR]
 Nov 07, 2019 11:38:28 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: encountered ";". Was expecting one of: "-" "," "[" "%" "." "and" "or" "not" ":" "#{" "through" "in" "{" <IDENT> <HASH> 
[ERROR]
 org.w3c.css.sac.CSSParseException: encountered ";". Was expecting one of: "-" "," "[" "%" "." "and" "or" "not" ":" "#{" "through" "in" "{" <IDENT> <HASH> 
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)	

And the error come from

	  /* piilotetaan indikaattoreita järjestyksessä. Tää on uberhack, koska vaadin-table ei salli
   header-cellien omia tyylejä */

  .v-table-panelistTable .v-table-header-cell:nth-child(19),
  .v-table-panelistTable .v-table-cell-content:nth-child(19) {
	  @media all and (max-width: 1380px) {
		display:none;
	  }
  }

display:none in the middle.

Also
@media all and (max-width: 1180px) { width:200px !important; .v-table-cell-wrapper { width:190px !important; } }
cause

[ERROR]
 SEVERE: Error when parsing file 
[ERROR]
 /home/pj/IdeaProjects/jufo/jufo-portlets/src/main/webapp/VAADIN/themes/jufotheme/jufotheme.scss on line 995, column 16
[ERROR]
 Nov 07, 2019 11:38:28 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR]
 SEVERE: encountered "200px". Was expecting one of: "-" "and" "or" "not" ":" "#{" "through" "in" <IDENT> <NOT_FUNCTION> <FUNCTION> 
[ERROR]
 org.w3c.css.sac.CSSParseException: encountered "200px". Was expecting one of: "-" "and" "or" "not" ":" "#{" "through" "in" <IDENT> <NOT_FUNCTION> <FUNCTION> 
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.styleRule(Parser.java:2203)
[ERROR]
 	at com.vaadin.sass.internal.parser.Parser.mediaDirective(Parser.java:1203)

After the previous one’s, I got

[ERROR]
 Nov 08, 2019 3:41:57 PM com.vaadin.sass.internal.handler.SCSSErrorHandler severe
[ERROR]
 SEVERE: CSS imports can only be used at the top level, not as nested imports. Within style rules, use SCSS imports.
[ERROR]
 Nov 08, 2019 3:41:57 PM com.vaadin.sass.internal.handler.SCSSErrorHandler severe
[ERROR]
 SEVERE: CSS imports can only be used at the top level, not as nested imports. Within style rules, use SCSS imports.