[Bug]SassError: Expected whitespace.

[TianLiangZhou]

Issue type

• [ x] bug report

Issue description

High version sass:1.54.9 error

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
   ╷
99 │     @media screen and(min-width: $layout-window-mode-max-width + 150px) {
   │                      ^
   ╵
  node_modules/@nebular/theme/components/layout/_layout.component.theme.scss 99:22  @forward
  node_modules/@nebular/theme/styles/global/_components.scss 7:1                    @use
  node_modules/@nebular/theme/styles/_globals.scss 9:1                              @import
  dashboard/styles.scss 8:9                                                         root stylesheet

[TianLiangZhou]

Put a space between and(, like this @media screen and (min-width: $layout-window-mode-max-width + 150px)

2023年1月13日 02:18，Gesiel Rosa @.***> 写道：

some workaround?

— Reply to this email directly, view it on GitHub https://github.com/akveo/nebular/issues/3131#issuecomment-1380808682, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABVXOPBKHVYZ34G7KQ6L36LWSBC6LANCNFSM6AAAAAARREDJF4. You are receiving this because you authored the thread.

[Utkrisht]

Hi, so I did exactly that

$responsiveA: "only screen and ( min-width: 992px ) and ( max-width: 1023px )";

@media #{$responsiveA} {
  .page-wrapper {
    margin-left: 150px;
  }
}

It still shows the same error

Expected whitespace.
    ╷
115 │ @media only screen and(  min-width: 992px, ) and ( max-width: 1023px,){
    │                       ^
    ╵
  apps\pilot\src\app\+entry\entry.component.scss 115:23  root stylesheet

Am I missing something? Please help

[gsspdev]

Did you ever figure this out? Having this issue with a different tool

[Utkrisht]

Did you ever figure this out? Having this issue with a different tool

I don't exactly remember what I did but the code looks like this now and doesn't have any errors.

$responsiveA: "only screen and ( min-width: 992px, ) and ( max-width: 1023px )";

@media #{$responsiveA} {
  .page-wrapper {
    margin-left: 150px;
  }
}

[KyrieHaveGoodDay]

I also have the same problem, but my project was running normally before this, I don't know what's wrong

By the way, I moved the project to another computer (same environment, can run normally)