Use and export scss in Angular library

Question

I've been moving chunks of shared code into a library that we can pull into our other projects, and part of that includes some core styles.

I have the library itself working, eventually (griping about documentation for all of this is a whole other topic), with a couple of the basic components. FYI, mostly set up using this as a guide.

However, I've just pulled in some more complex ones, and with it a couple of scss files that we want to use across projects as well as within the library components themselves (e.g. brand colouring, etc.).

I have my tsconfig.json set up per the above guide so that all my components can import with import { x } from '@my-lib/core/src/lib/y';.

I also found all the information eventually so that my styles are added to the output as assets so that our consuming projects have access to these; ng-package.json:

...
"assets: [
    "./assets"
]
...

(Note: styles/fonts found in assets/styles and assets/fonts respectively).

On to the problems.

How am I supposed to reference these? Typically in our basic Angular projects its a simple @import 'src/styles/x'; kind of affair.

Making use of the path aliasing that I so enjoy with the components doesn't work, e.g. import '@my-lib/core/assets/styles/x';.

Using a relative path does.. sort of. e.g. import '../../../assets/styles/x';

Note: One of the shared styles is for typography, and it has src: url(../fonts/xyz.eot);` type usages (relative pathing).

At this point it gets further in the compilation process than the @my-lib import, but throws up warnings to the effect:

WARNING: postcss-url: C:\.....\projects\core\src\lib\my-module\components\my-component\my-component.component.scss:36:3: Can't read file 'C:\.....\projects\core\src\lib\my-module\components\fonts\xyz', ignoring

The path suggests it's running the typography file in a literal sense, the ..\fonts url is relative from the point of import (component) rather than its base file location within assets.

How do I get all this properly hooked up and why has no one managed to write basic guides for these things already?

Going to have to start my own 'idiots guide' blog just to dumb down instructions for others like myself...

Wenzel

Answer 1

Ok, Drenai's link didn't help (seen that answer already), but this one did.

In theory.

I haven't got the project to build yet because for some reason it doesn't want to accept that mat-checkbox is, in fact, a known element, but I'll eventually figure that part out.

The scss errors have gone away, though, so I'm trusting my changes have worked...

Created a root styles.scss file for the project. Contents:

@import './assets/styles/typography';
@import './assets/styles/colours';

Added this to the assets in the root ng-package.json:

"assets": [
    "./assets",
    "styles.scss"
]

Moved the fonts so that instead of

assets
    - styles
    - fonts

it's now

assets
    - styles
        - fonts

to try and save some jumping around.

And finally updated the various font-face urls to be ~/fonts/....

Then each component seems happy to do a relative import to the singular styles file, e.g. @import '../../../../styles';

On the fence as to whether the components need the encapsulation: ViewEncapsulation.None setting as, as mentioned, I haven't got the stupid thing to actually build.

[Mid-post edit] However, quickly making use of it in one of the other modules (that otherwise doesn't use the shared styles) for testing shows that it works, and no view encapsulation used.

Rejoice.

P.S. I also have the scss files as exports in the root package.json, and I don't know if it's necessary but I'll leave them in because I can't be bothered to test anything further. It works, good enough for my poor abused brain on a weekend.

"exports": {
    "./colours": {
        "sass": "./assets/styles/_colours.scss"
    },
    "./typography": {
        "sass": "./assets/styles/_typography.scss"
    }
}

Wenzel

Answer 2

Add styles under assets array in ng-package.json to export it as styles in lib.

Here I can access below core styles with reference folder styles

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/theme",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    { "input": "src/lib/core", "glob": "**/*.scss", "output": "styles" }
  ]
}

Inebriant