Using scss mixins in angular 10 component library

Question

For example if I have the following structure:

component-library > src > lib

Inside the lib folder I have a styles folder and a button component folder

Now in the styles folder I have declared a styles.scss file and a mixins folder.

In the mixins folder I declare some mixins which I then import to use in the button component as well as other components but the issue I am facing right now is that every time I run ng-build to build the lib.

Errors are being thrown. for example:

ERROR: Undefined mixin. ╷ 7 │ @include mixin-name; │ ^^^^^^^^^^^^^^^^^^^^^ ╵

src\lib\button\button.component.scss 7:3 root stylesheet An unhandled exception occurred: Undefined mixin. ╷ 7 │ @include button-reset; │ ^^^^^^^^^^^^^^^^^^^^^ ╵

What do I need to configure different to achieve this as if I was ng building an actual angular application? I have read that library is built differently compared to the actual app.

Any solutions to get around this or do I need a different approach to this? Like for example wherever I need to use that mixin, I'd need to duplicate the styles multiple times in every component?

Chief Chief · Accepted Answer · 2021-02-03T23:25:26

After digging around especially on github. It was suggested that issues is not related to anglar or the cli itself but rather ng-packagr and the way it bundles the files when you execute the command ng build.....

From this link to ng-packagr copy assets, they suggest adding the following to the library's ng-package.json:

{
    "$schema": ".....",
    "dest": "......",
    "assets": "src/lib/assets/styles/mixins/<filename>.theme.scss"
}

That way I can still use and import the mixins into the components. The above will successfully resolve, the errors and will build successfully.

Much better from ng-packagr team, spent the last few days fluffing about trying to come up with a working script to try and achieve this.

Using scss mixins in angular 10 component library

1 Answers