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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.