javascript - Include CSS (Sass) from multiple modules -

i'm putting repo available on npm. repo consists of multiple modules, similar react-leaflet , react-d3. application developers include modules within npm package via require/import, e.g.:

import { moduleone, moduletwo } 'mynpmpackage`; 

i need package css along each of these modules, , css compiled sass files within each module.

given folder structure mynpmpackage like:

├── src │   ├── moduleone │   │   ├── index.js │   │   ├── style.scss │   ├── moduletwo │   │   ├── index.js │   │   ├── style.scss ├── package.json 

what publish flow make .scss files (compiled .css) available consumers of mynpmpackage, without requiring consumers explicitly include / @import / link rel="stylesheet" css?

i'm using gulp , browserify , prefer stick pipeline.

---

update: i've found parcelify some of need. add following mynpmpackage/package.json:

"style": "src/**/*.scss", "transforms": [   "sass-css-stream" ] 

and add parcelify dependencies, it's installed along mynpmpackage.

consumers of mynpmpackage must add following gulpfile:

parcelify(b, {     bundles: {         style: './build/modules.css'     } }); 

parcelify use "style" glob in mynpmpackage/package.json round .scss files in mynpmpackage's modules , bundle them ./build/modules.css.

this getting there, not ideal 2 reasons:

1. the css files each module included in consumer application build, if not modules included;
2. this strategy requires consumer application developer add code gulpfile instead of "just working".

here webpack setup need:

• only imported modules css included in the build (modulethree not instance).
• no need update gulpfile.js or *.config.js, each module require own stylesheet(s) other dependency.

bonus: moduletwo shows how lazy load css , contains background image included dependency well.

note: didn't use es2015 syntax if wish babel-loader.