CODEWITHSUNDEEP
angularsass
Peter R.
Peter R.

Reputation: 43

Angular lib - expose common scss

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?

Upvotes: 1

Views: 912

Answers (1)

samuil gospodinov
samuil gospodinov

Reputation: 36

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.

Upvotes: 2

Related Questions