Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include CSS (Sass) from multiple modules

I'm putting together a repo that will be available on npm. The repo consists of multiple modules, similar to react-leaflet and react-d3. Application developers will include modules from within the npm package via require/import, e.g.:

import { ModuleOne, ModuleTwo } from 'myNpmPackage`;

I need to package CSS along with each of these modules, and that CSS will be compiled from Sass files within each module.

Given a folder structure for myNpmPackage like:

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

What is a good publish flow to make those .scss files (compiled into .css) available to consumers of myNpmPackage, without requiring that consumers explicitly include / @import / link rel="stylesheet" the CSS?

I'm using gulp and browserify and would prefer to stick with that pipeline.


UPDATE: I've found parcelify does some of what I need. I add the following to myNpmPackage/package.json:

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

and add parcelify to dependencies, so that it's installed along with myNpmPackage.

Consumers of myNpmPackage must then add the following to their gulpfile:

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

parcelify will use the "style" glob in myNpmPackage/package.json to round up all the .scss files in myNpmPackage's modules and bundle them into ./build/modules.css.

This is getting there, but not ideal for two reasons:

  1. The CSS files from each module are all included in the consumer application build, even if not all the modules are included;
  2. This strategy requires the consumer application developer to add code to their gulpfile instead of "just working".
like image 466
ericsoco Avatar asked Sep 29 '15 20:09

ericsoco


People also ask

Can you use Sass with CSS modules?

css-modules is not related to SASS or SCSS and has its own set of supported features and keywords. Yes, they can be used together, which I actually do in most my projects. But I avoid having classname dependencies between different files.

Can I mix CSS and SCSS?

yes, that's perfectly fine, no problem.

How do I use multiple Sass files?

To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions. Such that combine all stylesheets together for compiled css.

Can you import SCSS into Sass?

Tip: You do not need to specify a file extension, Sass automatically assumes that you mean a .sass or .scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.


1 Answers

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

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

Bonus: ModuleTwo shows how to lazy load CSS and also contains a background image which will be included like any dependency as well.

Note: I didn't use ES2015 syntax but you could if you wish with babel-loader.

like image 93
Julien Cabanès Avatar answered Oct 02 '22 13:10

Julien Cabanès