I am trying to create a bundle of my common styles defined in my angular library. I want to use mixins, functions, variables, etc. from my lib in my future projects.
Usually in this situation I used to scss-bundle tool => https://www.npmjs.com/package/scss-bundle , but as I know this solution is deprecated for sass '@use' '@forward' and when I am trying to run scss-bundle I get an unknown import error, because in my index.scss I use the '@forward' keyword.
Is there any other solution, how to bundling scss files from angular lib and move it to dist directly? I know, I can do it by webpack, parcel, etc., but I do not want to attach it to my lib dependencies. Is there any more configurable approach, something directly from angular, or some simple npm tool like scss-bundle?
As per the official documentation of ng-packagr you can now specify the directory and / or files you would like to copy into the bundle.
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/my-component-library",
"lib": {
"entryFile": "src/index.ts"
},
"assets": [
"./my-dir"
]
}
You can then reference this dir as: @import ~my-library/my-dir.
Keep in mind that, given the above config, my-dir needs to be at the root of the library. Another thing to mention is that ng-packagr preserves the tree structure. For example, if you have the following config:
"assets": [
"./dir1/dir2/my-dir"
]
then after you build your library, you would need to reference my-dir like so:
@import ~my-library/dir1/dir2/my-dir.