Publishing and importing a commons scss library to an Angular app

I started writing a series explaining how to design your architecture patterns, to end up with an effective lazy loading strategy. The series is framework agnostic and the examples are for a multi-tenant platform that implements sass and ES6, loaded, preprocessed and transpiled with webpack.

I recommend you read the series starting here and all the way through the current 4 parts. The rationale behind the architectural decisions is explained in detail there.

In part 4 I walk you through the necessary steps to finally publish the package.

Steps 1 through 7 are identical for Angular, as well. Where things change a bit, are in Step 8. So read that post until Step 7, and then continue here.

Step8: Using the package as a dependency

Ok! Now you have your shared abstracts published as an npm package. For it to be useful, you need to integrate it into your Angular code.

First of all, you will need to install the package as a dependency in your project, by going to the folder where the package.json is at and running.

$ npm install fe-scss-commons@1.0.0 --save

Now you will for sure make these abstracts available to your own component's code, and for that, you need to make it accessible, via angular.json configuration.

I am going to assume you effectively chose sass as your preprocessor when generating the app (ok I am also assuming here you have used CLI for that :D )

If that's the case, you will need to find the following property in your angular.json

"stylePreprocessorOptions": {
"includePaths": [
node_modules
]
},


Basically, you want to be able to pass the node_module path to the sass compiler.

The image below better illustrates it

Once you have, you can import any stylesheet in this path, relative to the node_modules folder, like this. For example, in an X app, I am importing the breakpoint-sass breakpoints mixin, in this way:

That shows that I have imported the breakpoints mixin from breakpoint-sass in the node_modules folder, and I am successfully applying a red background to every div for a min-width of 768px.

BTW! The example above is just to quickly demonstrate success, do not be the evil person that targets HTML elements in your stylesheets. The Goddess of Specificity will come after you.

In the case of your fe-scss-commons, you can just import your variables by importing

@import fe-scss-commons/all_imports

That should be it! Now you're ready to use your commons