Storefront:hot-proxy generates error

Shopware 6 (English) Installation / Getting Started (EN)
1

I have a fresh and clean installation with a basic theme:create plugin.

When using storefront:hot-proxy I get the following errors - resulting in a broken storefront.

Anybody any idea what I can do?

ERROR Failed to compile with 1 errors7:04:33 PM

	 error in /app/var/theme-entry.scss

	Module build failed (from ../node_modules/sass-loader/lib/loader.js):

	    a&:hover {
	    ^
	      Invalid CSS after "a": expected "{", was "&"

	"&" may only be used at the beginning of a compound selector.
	      in /app/platform/src/Storefront/Resources/app/storefront/src/scss/skin/shopware/page/checkout/_cart-item.scss (line 38, column 6)

	 @ /app/var/theme-entry.scss 2:14-347 21:1-42:3 22:19-352
	 @ multi ./src/main.js /app/custom/plugins/MyPlugin/src/Resources/app/storefront/src/main.js /app/var/theme-entry.scss

	############
	Storefront proxy server started at http://localhost:9998
	############


	 WAIT Compiling...7:04:33 PM

	✔ Shopware 6 Storefront: Compiled with some errors in 3.99s (repeated 1 times)
	✔ Shopware 6 Storefront: Compiled with some errors in 271.66ms
	 ERROR Failed to compile with 1 errors7:04:35 PM

	 error in /app/var/theme-entry.scss

	Module build failed (from ../node_modules/sass-loader/lib/loader.js):

	    a&:hover {
	    ^
	      Invalid CSS after "a": expected "{", was "&"

	"&" may only be used at the beginning of a compound selector.
	      in /app/platform/src/Storefront/Resources/app/storefront/src/scss/skin/shopware/page/checkout/_cart-item.scss (line 38, column 6)

	 @ /app/var/theme-entry.scss 2:14-347 21:1-42:3 22:19-352
	 @ multi ./src/main.js /app/custom/plugins/MyPlugin/src/Resources/app/storefront/src/main.js /app/var/theme-entry.scss

 

2

The problem is a current bug in the file /app/platform/src/Storefront/Resources/app/storefront/src/scss/skin/shopware/page/checkout/_cart-item.scss

As a temporary fix you can change the code in line 38 from:

a&:hover {
  color: $primary;
  text-decoration: none;
}

to:

a {
  &:hover {
    color: $primary;
    text-decoration: none;
  }
}

There is already an issue on github, which was resolved 8 days ago: