Import SCSS variables file in Angular library modules

Question

I am working on a project which is an Angular Library (which uses SCSS).

My project structure is like this:

├───UI-lib
│   ├──assets
│   │   └───styles/
│   │         └───_theme.scss
│   │         └───_varialbes.scss
│   └──src
│       └───lib
│           └─modules
│              ├───autocomplete
│              │   └───components
│              │       └───auto-complete/
│              ├───checkbox
│              │   └───components
│              │       └───checkbox/

  ......................

 │       
 ├───App Test        
 ├───e2e/
 └───src
     ├───app         
          └───my-module

My ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-lib",
  "assets": [
    "./assets/"
  ],
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./assets/styles/_theme.scss"
    ]
  },
  "whitelistedNonPeerDependencies": ["."]
}

The problem is that I am not able to import my _varialbe.scss file in my modules' components.

Can you help me how can I import _variables.scss file in UI-lib/src/lib/modules/autcomplete/components/autocomplete/autocomplete.component.scss ?

I tried to search online but didn't find the solution that works.

Answer 1

I have tried to import from the root folder of the project and it worked!!!

autocomplete.component.scss

@import "projects/ui-lib/assets/styles/_variables";
   
...

Answer 2

Having scss files in assets folder is strange. Are you going to serve them as static resources?

Any way, just use relative path (with a couple of ../) or an absolute path to your _variables.scss in order to import it.

Answer 3

Importing node module scss files in simple, it can be imported using import in the scss file. For more details, you can look at this link