packaging scss with npm

Question

I have a set of scss file that I package as a library for reuse in several other web applications. I am aware that in my package.son for js files, I can specify the entry point in main property. Not sure how to specify this for scss file libraries. I have a main.scss that includes all the scss files that I developed and that imports the thirdparty sass files that need. I looked up how bootstrap the scss files and found that they don't really mention the main stylesheet in the package.json.

Do I need to define the main property in the package.json or leave it documented on how the scss files need to be resolved from node_modules?

Answer 1

If you're using node-sass (or something that depends on node-sass) to compile your sass then you can use sass-module-importer to import your own main.scss.

In your repository with your main.scss file you just need to set the "style" or "main" property in your package.json to point to your main.scss file (example here: https://github.com/bameyrick/sass-helpers/blob/master/package.json).

If the third party scripts you import into your main.scss file do not have a style or main property in their package.json, then the imports in your main.scss file will need to point to that file from the node_modules folder (e.g. @import './node_modules/third-party-lib/src/index.scss') because sass-module-importer will not be able to resolve that dependency for you.