Webpack SASS build failed

[nasirkhan]

I added the soft-ui-design-system package via Yarn and tried to build the SASS via webpack. But build failed with a number of errors. Here are some warnings and errors i faced, what are the options to build the SASS here?

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
284 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    node_modules\soft-ui-design-system\assets\scss\soft-design-system\_variables.scss 284:6  @import
    stdin 21:9                                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
285 │   2: $spacer / 2,
    │      ^^^^^^^^^^^
    ╵
    node_modules\soft-ui-design-system\assets\scss\soft-design-system\_variables.scss 285:6  @import
    stdin 21:9                                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
511 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules\soft-ui-design-system\assets\scss\soft-design-system\_variables.scss 511:31  @import
    stdin 21:9                                                                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

     ╷
1076 │ $navbar-padding-y:                  $spacer / 2 !default;
     │                                     ^^^^^^^^^^^
     ╵
    node_modules\soft-ui-design-system\assets\scss\soft-design-system\_variables.scss 1076:37  @import
    stdin 21:9                                                                                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($nav-link-height - $navbar-brand-height, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

     ╷
1087 │ $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
     │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    node_modules\soft-ui-design-system\assets\scss\soft-design-system\_variables.scss 1087:37  @import
    stdin 21:9                                                                                 root stylesheet

 error  in ./node_modules/soft-ui-design-system/assets/scss/soft-design-system.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
   ╷
15 │   &.bg-gradient-faded-#{$prop}-vertical{
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\soft-ui-design-system\assets\scss\soft-design-system\_gradients.scss 15:3  @import
  node_modules\soft-ui-design-system\assets\scss\soft-design-system\theme.scss 34:9       @import

 error  in ./node_modules/soft-ui-design-system/assets/scss/soft-design-system.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
   ╷
15 │   &.bg-gradient-faded-#{$prop}-vertical{
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\soft-ui-design-system\assets\scss\soft-design-system\_gradients.scss 15:3  @import
  node_modules\soft-ui-design-system\assets\scss\soft-design-system\theme.scss 34:9       @import

[groovemen]

Hello @nasirkhan,

Thank you for using our products, we don't usually use Yarn to compile our products SCSS. I will talk with my colleagues and maybe in the future product updates, we will integrate the Yarn besides Gulp. Please let us know if we can help you with anything else.

All the best, Stefan

[Jimmi08]

Hi, I use Koala for compile and I got the same error. No changes, just downloaded version.

Error: Base-level rules cannot contain the parent-selector-referencing character '&'.
        on line 15 of ***/soft-ui-design-system-main/assets/scss/soft-design-system/_gradients.scss
        from line 42 of ***/soft-ui-design-system-main/assets/scss/soft-design-system/theme.scss
        from line 27 of ***\soft-ui-design-system-main\assets\scss\soft-design-system.scss

Fix in _gradients.scss:

@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%);
  }
}

delete & (there is no parent rule)

@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%);
  }
}

[trentclowater]

The deprecation warnings are not caused by yarn, it is caused by using Dart Sass (which is now the reference implementation of Sass). Dart Sass is deprecating "/" as a divide symbol. We are currently in the transition period, so it is printing deprecation warnings (see https://sass-lang.com/documentation/breaking-changes/slash-div)

This can be fixed by either changing to math.div() (backward compatibility issues) or wrapping all division operations in a calc().