File to import not found or unreadable: SCSS

Question

I am building an angular application. While trying to import style scss files, I am getting compile error:

File to import not found or unreadable: layout/menu.

My folder structure is:

Insurance\src\shared\styles.scss

and for a scss file that I want to include inside the styles.scss is:

Insurance\src\shared\styles\layout\_menu.scss

Inside styles.scss I have written:

@import "layout/menu";

in my angulaar.json file I have mentioned:

"styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/shared/styles.scss"
        ],

However, when I compile the code it gives the following error:

@import "layout/menu";
 ^
  File to import not found or unreadable: layout/menu.
  in Insurance\Insurance\src\shared\styles.scss 
  File to import not found or unreadable: layout/menu.

Not sure why this is happening.

Answer 1

Is "styles" a folder within "shared"? If so, you want to say

@import "/styles/layout/menu";

Otherwise it won't know to look in the styles folder