I am in the process of developing a library project using angular-cli. I have been following the guidelines outlined in the angular documentation. This has resulted in the creation of two main folders: one is located at ./root/src/app, where I can showcase a test application to demonstrate my library's capabilities, and the other is at ./root/projects/library-name, containing the functionality of the library itself.
While working within the ./root/src/app folder, I am able to easily import modules, components, and classes thanks to the paths configuration set up in my tsconfig.json file by angular-cli.
{
"compilerOptions": {
"paths": {
"my-library/*": [
"dist/my-library/*"
]
}
}
}
This configuration essentially simulates the presence of our library as if it were installed as a node_module, even though the library is actually built in the ./root/dist/library-name directory.
However, an issue arises with SCSS files not adhering to the same rules as outlined in tsconfig.json. If I want to include SCSS files in my library for consumers to access, they can do so easily by importing them using @import '~library-name/scss';. Unfortunately, this doesn't work in my test application located in ./root/src/app.
To tackle this problem, how can I configure my SCSS preprocessor settings in the angular.json file to replicate what angular-cli has done with tsconfig.json but for SCSS? In essence, how can I set up a directory alias for my library's build output specifically for SCSS files?
EDIT: It's important to note that once the library is published, the SCSS files are accessible without any issues when consumed by external applications. The challenge lies in accessing the published SCSS within my ./root/src/app test application.