Set scss path using alias in angular-cli library project

Question

I'm creating a library project using angular-cli. By following the instructions from the angular docs, I end up having one ./root/src/app folder where I can put a test application demonstrating the capabilities of my library, and one ./root/projects/library-name folder containing the functionality of my library.

Now, if I in my ./root/src/app want to import modules/components/classes etc, angular-cli allready has set up my tsconfig.json for me, with a key/value paths config.

{
  "compilerOptions": {
    "paths": {
      "my-library/*": [
        "dist/my-library/*"
      ]
    }
  }
}

This will for all purposes regarding our ./root/src/app mimic our library being installed as a node_module.

So even if the library is built to ./root/dist/library-name, the following works great in my test app:

import { MyLibraryModule } from 'library-name';

Problem

SCSS does not conform to the same rules as described under tsconfig.json. If my library contains some scss I wish to make available for consumers of my lib, I can do that. Everyone installing my library can reach my scss through

@import '~library-name/scss';

but my test app cannot.

Question

How can I configure my scss preprocessor config in angular.json in such a way that it mimics what angular-cli has done with my tsconfig.json, but for scss? In other words; how can I configure angular-cli to set up a directory alias for my library build output?

EDIT Just to clarify, my scss is reachable once the library is published. No problem when it is consumed by other applications. My problem is reaching the published scss inside my ./root/src/app test application.

Answer 1

I had the same problem with my own project. I wanted to have some scss files exported along side my library, something like angular material's themes folder. I found using scss-bundle library a good solution cause apparently there are no ways to do so using angular cli.

Using scss-bundle is pretty simple. You need a config file, something like:

{
    "entry": "src/lib/themes/_core.scss",
    "dest": "dist/themes/_theme.scss"
}

and run this command every time you build your lib: scss-bundle -c ./scss-bundle.config.json

and here is the github repo in case you have different needs

UPDATE: Changing sass loader config so that you can import scss files easier inside application project

If you want to import scss partials as you do from node_modules you need to change webpack and sass-loader configurations. WEbpack configuration is hidden by default in angular cli depending on your cli version you have to ways of changing it.

1.x You need to use ng eject to "eject" webpack config file. Official docs for that

6.x In cli v6 ng eject is disabled temporarily, BUT there is still a way to get around that, you can find a well written guide to it here

and after all these you need to configure sass-loader to consider your lib project as a root path that you can find the answer to here