Import CSS files from npm libraries
Posted: ,
Modified:
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.