Error on @import ~fiori-fundamentals/scss/layout and /all

[weitlos]

Hi,

I tried to follow the steps shown in this youtube video: https://www.youtube.com/watch?v=P5AP2wTpx7Y

On importing multiple files there is always one failing:
@import "~fiori-fundamentals/scss/core";
@import "~fiori-fundamentals/scss/layout"; <-----
@import "~fiori-fundamentals/scss/helpers";

Here is the error message from the console while trying to execute ng serve:

ERROR in ./src/scss/core.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/scss/core.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
Expected "=".
╷
15 │ @if $direction = horizontal {
│ ^
╵
node_modules\fiori-fundamentals\scss\layout_mixins.scss 15:18 @import
node_modules\fiori-fundamentals\scss\layout_col.scss 4:9 @import
node_modules\fiori-fundamentals\scss\layout.scss 3:9 @import
node_modules\fiori-fundamentals\scss\all.scss 13:9 @import
stdin 8:9

Is this issue related to a specific component?
No
What version of the Fundamentals are you using?
Actually I don't know. I just started today working with it.

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
No

What front-end framework are you implementing in, e.g., Angular, React, etc.?
Angular

To Reproduce
Steps to reproduce the behavior:

1. Include the following line of code in your project: @import "~fiori-fundamentals/scss/layout";
2. run ng serve

Expected behavior
From what I saw in the video I would expect, that ng serve would compile successfully.

Desktop:

• Windows 10
• Chrome
• Version [e.g. 22]

Additional context
This is my first issue ever so please excuse if not perfect. I hope the information above will help you! I really like the idea of Fiori Fundamentals and looking forward to great stuff.

[moloti]

I have the exact same issue

[moloti]

So after some trying, it worked with downgrading sass-loader to 7.x version. Hope that helps!

[adgasi]

This is a syntax error. I am facing the same issue in my project.
It was detected after replacing the node-sass with dart-sass (sass npm package).
New preprocessor throws the following error:

Fix
As is

@if $direction = horizontal {

To be

@if $direction == horizontal {