Utilize CSS (Sass) from various modules in your project

Question

Utilize CSS (Sass) from various modules in your project

Planning to create a repository for npm, similar to react-leaflet and react-d3, that will consist of various modules. Developers can include these modules from the npm package using require/import. For example:

import { ModuleOne, ModuleTwo } from 'myNpmPackage`;

The challenge is packaging CSS along with each module, compiled from Sass files in each one.

Considering a folder structure like this for myNpmPackage:

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

How can we publish these .scss files (compiled into

.css</code) without requiring consumers to manually include / <code>@import

/ link rel="stylesheet" the CSS?

Utilizing gulp and browserify pipeline is preferred.

UPDATE: Discovered parcelify offers partial solution. Adding the following configuration to myNpmPackage/package.json:

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

Including parcelify in dependencies so it's installed with myNpmPackage.

Consumers need to update their gulpfile with:

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

parcelify uses the glob in myNpmPackage/package.json to bundle all .scss files into ./build/modules.css.

This solution has drawbacks:

All CSS files are included in consumer application build, even if not all modules are used;
Requires manual addition of code to gulpfile by consumer developers.

javascript sass npm gulp browserify

Answer 1

Answer №1

Check out this Webpack configuration that fulfills all your requirements:

Only CSS modules that are imported are included in the final build (ModuleThree, for example, is excluded).
No need to modify any existing gulpfile.js or *.config.js; each module simply requires its own stylesheets like any other dependency.

Bonus Tip: ModuleTwo demonstrates how to dynamically load CSS and also includes a background image, treated as a regular dependency.

Important: While I didn't use ES2015 syntax in this demo, you have the option of incorporating it using babel-loader.

Answer 2

Check out this Webpack configuration that fulfills all your requirements:

Only CSS modules that are imported are included in the final build (ModuleThree, for example, is excluded).
No need to modify any existing gulpfile.js or *.config.js; each module simply requires its own stylesheets like any other dependency.

Bonus Tip: ModuleTwo demonstrates how to dynamically load CSS and also includes a background image, treated as a regular dependency.

Important: While I didn't use ES2015 syntax in this demo, you have the option of incorporating it using babel-loader.

Answer 3

Answer №2

The way you handle your SCSS to CSS conversion depends on your unique development pipeline. One approach is to render all your SCSS into CSS when building your app. If you end up with a single CSS file containing all styles, you can easily include it in a JavaScript file using various methods provided by tools like the gulp ecosystem and plugins such as this one.

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('/* CSS File 1 */');

You can set this up in your gulp pipeline like so:

var gfi = require("gulp-file-insert");

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

If you're interested, you can check out this reference: Inject CSS stylesheet as string using Javascript

Answer 4

The way you handle your SCSS to CSS conversion depends on your unique development pipeline. One approach is to render all your SCSS into CSS when building your app. If you end up with a single CSS file containing all styles, you can easily include it in a JavaScript file using various methods provided by tools like the gulp ecosystem and plugins such as this one.

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('/* CSS File 1 */');

You can set this up in your gulp pipeline like so:

var gfi = require("gulp-file-insert");

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

If you're interested, you can check out this reference: Inject CSS stylesheet as string using Javascript

Utilize CSS (Sass) from various modules in your project

Answer №1

Answer №2

Similar questions

Contrasting characteristics of a node.js server built with http.createServer versus one created with express

Encountering a ReferrenceError when utilizing jQuery with TypeScript

Leveraging the Firebase email trigger extension with JavaScript

Is there a way to use Laravel to send an asynchronous post request for managing likes?

Using the typeof operator to test a Typescript array being passed as an object

The state returned by React Redux does not meet the expected results

The Highcharts Angular Chart fails to update after the renderer.button event is triggered

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Setting the variable to global does not apply styling to the element

The item I possess fails to catch the light in Three.js

Implement Offcanvas feature with Bootstrap 3 Navbar set to Fixed Top position

Which alternative function can I use instead of onchange without having to modify the slider beforehand in order for it to function properly?

Why is my nested React Router component failing to load upon page refresh?

When using npm/gulp, it may sometimes fetch numerous modules that are not listed in the package.json file

Component not appearing in React Router v4

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

Creating a Dynamic Scrolling Effect in React JS: Rendering a New Component as You Scroll

Javascript experiencing a malfunction

Ensure that each image is not affected in jQuery

When state updates in React, the component will rerender without affecting its style