Enable CSS (Sass) from multiple modules

Question

I am building a repo that will be available on npm. The repo consists of several modules similar to react-leaflet and react-d3 . Application developers will include modules from the npm package through require / import , for example:

 import { ModuleOne, ModuleTwo } from 'myNpmPackage`; 

I need to pack CSS together with each of these modules and that CSS will be compiled from Sass files in each module.

Given the folder structure for myNpmPackage , for example:

 ├── src │ ├── ModuleOne │ │ ├── index.js │ │ ├── style.scss │ ├── ModuleTwo │ │ ├── index.js │ │ ├── style.scss ├── package.json 

What is a good publishing stream to make these .scss files (compiled into .css ) accessible to myNpmPackage consumers without requiring users to explicitly include / @import / link rel="stylesheet" CSS?

I use gulp and browserify and prefer to stick with this pipeline.

---

UPDATE: I found parcelify doing some of what I need. I am adding the following to myNpmPackage/package.json :

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

and add parcelify to dependencies so that it is installed along with myNpmPackage .

Consumers of myNpmPackage should add the following to their gulpfile :

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

parcelify will use glob "style" in myNpmPackage/package.json to round off all .scss files in .scss modules and myNpmPackage them out to ./build/modules.css .

This happens, but not perfect, for two reasons:

• CSS files from each module are included in the consumer application assembly, even if not all modules are included;
• This strategy requires the application developer to add code to his gulpfile instead of just working.

Answer 1

Here is the Webpack setup that does exactly what you need:

• only imported CSS modules are included in the assembly ( ModuleThree does not apply).
• no need to update some gulpfile.js or *.config.js , each module require its own stylesheet , like any other dependency.

Bonus : ModuleTwo shows how to lazy CSS loading , and also contains a background image that will be included like any dependency.

Note I did not use ES2015 syntax, but you could, if you want, babel-loader .

Answer 2

This partly depends on your own development pipeline. You can display all of your SCSS in CSS when creating your application. Assuming you have one CSS file with all the styles rendered, you can include it in a JavaScript file using various methods in the gulp ecosystem, for example this plugin .

 function addStyleString(str) { var node = document.createElement('style'); node.innerHTML = str; document.body.appendChild(node); } addStyleString('/* CSS File 1 */'); 

And in the gulp pipeline:

 var gfi = require("gulp-file-insert"); gulp.src('./sample.js') .pipe(gfi({ "/* CSS File 1 */": "path/to/main.css" })) .pipe(gulp.dest('./dist/')); 

Link: Enter CSS stylesheet as string using Javascript