[Bug] SassError: Top-level selectors may not contain the parent selector "&".

crisstelista commented 3 years ago

Version

Version 1.0.8

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

Laptop

Browser & Version

Chrome

Steps to reproduce

I'm running into some issues with the Sass files. I am using Laravel 8 and I integrated this template into my resources folder. I added on my package.json all the dev dependencies existing in the json file of the template. I run the commands npm install and then npm run dev.

What is expected?

To be able to run the commands

What is actually happening?

ERROR in ./resources/assets/scss/presentation/soft-design-system-pro.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Top-level selectors may not contain the parent selector "&".

Solution

Additional comments

rarestoma commented 3 years ago

Hi @crisstelista,

Thank you for working with our products.

Please try replace the following line:

@each $prop, $value in $theme-colors {
  &.bg-gradient-faded-#{$prop}-vertical{
    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
  }
}

with

@each $prop, $value in $theme-colors {
  .bg-gradient-faded-#{$prop}-vertical{
    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
  }
}

Now the error should no longer exist.

Please let me know if it works.

Best regards, Rares

crisstelista commented 3 years ago

This fix the problem.

Thanks!

creativetimofficial / ct-soft-ui-design-system-pro