Export separate file with SCSS variables, functions and mixins (variables.scss) for library users

[earshinov]

In madoar/angular-archwizard-demo#40 (comment), it became apparent that angular-archwizard should export a separate file with SCSS variables so that this file can be safely imported into component's style file without causing style duplication.

One option would be reorganize source *.scss files so that they could be exported as is. It would simplify the build process (scss-merge would no longer be necessary), but on the other hand all styles would need to be placed into just two files (archwizard.scss and variables.scss), which I find limiting and not very convenient for development. The reason why we have build tools is to structure the source files the way we need.

Another option, which I went for, is to enhance the build process to extract the file with variables automatically. I did not find a ready-to-use script which would suit this purpose perfectly, so I wrote my own little tool:

• https://github.com/earshinov/extract-scss-variables
• https://www.npmjs.com/package/@earshinov/extract-scss-variables

I did my best to make this project as robust as possible (with unit tests etc.), so hopefully it is acceptable to add this project as development dependency to angular-archwizard.

[madoar]

Looks interesting. Just to clarify:
When we're talking about extracting we mean:

• removing the variable/constant definition from the initial source file
• add the variable/constant definition to a new previously not existing variables.scss file
• add an additional import to the new variables.scss file to the initial source file

right?

[madoar]

Additionally I would recommend your adding some batches to the project page (i.e. npm, codacy for code style and coverage).

[earshinov]

right?

Yes, precisely. I think I need to add an example input and output to the project's README to clarify.

(i.e. npm, codacy for code style and coverage).

Good idea. Will do.