Import CSS files from npm libraries

Posted: , Modified:   Nodejs npm Parcelify rework
Copyright certificate by blockai

Summary

Client-side package management tool has been replacing to npm from bower, and client-side JavaScript packages are imported with Browserify. However, it is difficult to import CSS files. Supposing importing bootstrap’s css installed with npm, which is installed by npm i --save bootstrap, to bundle.css, this entry explains two importing ways; Parcelify and rework.

We assume to use Gulp as the task runner, and we investigate ways that don’t fix directory structure.

Parcelify

Parcelify is a famous plugin of Browserify, which means if your project doesn’t use JavaScript, you need to add a dummy script file to use Parcelify. To use Parcelify, you need to list up css files at style attribute in your package.json.

For example, the following package.json imports css files provided from Bootstrap.

{
  "style": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./src/css/main.css"
  ]
}

Note that the above object omits other elements.

The following gulp task, then, bundles the css files listed in style attribute of your package.json and makes bundle.css:

gulp = require "gulp"
browserify = require "browserify"
parcelify = require "parcelify"
source = require "vinyl-source-stream"

gulp.task "browserify", ->
  b = browserify
    entries: ["./src/main.js"]
    extensions: [".js"]
  parcelify b,
    bundles:
      style: "./public/bundle/bundle.css"
  b.bundle()
    .pipe source "bundle.js"
    .pipe gulp.dest ".public/bundle/"

This way works but to list up all css files in the style attribute, you need to know directory structures of all packages, and such structures will be changed when packages are updated. In other words, this way isn’t sustainable.

rework

rework and a plugin of it rework-npm search all package.json of the packages you’re using, and import css files those packages provide. In other words, you don’t need to list up css files in your package.json.

gulp-rework is a package to use rework from glup, and we use it in this entry.

First, we need to make a parent css file describing which css files to be imported by rework. For example, the following parent css file imports css files provided from Bootstrap.

@import "bootstrap";

/* We omit other entries. */

We put the parent css file in ./src/.

Next, we make the following gulp task, which reads all css files in ./src/ and makes a bundled css file.

gulp = require "gulp"
rework = require "gulp-rework"
reworkNPM = require "rework-npm"

gulp.task "css", ->
  gulp.src "./src/*.css"
    .pipe rework(reworkNPM())
    .pipe gulp.dest "./public/bundle/"

Running css task, rework imports Bootstrap’s css files and put them to the bundled file.

In this method, you don’t need to check file structures of each package. However, it, rework-npm, requires each package lists up its css file in its package.json, which means you don’t need to list up them but the authors of each package have to do that.

After listing up css files in style attribute becomes a standard, this method would work well, but right now there are still packages which doesn’t do that, and you have to do it instead. The cost seems as same as one using Parcelify.