Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What is going on with this article?
@jkawamoto

npm管理のライブラリが提供する css をインポートする

More than 3 years have passed since last update.

概要

English
クライアントサイドのパッケージ管理は,bower から npm に移した方が良いらしい.npm 管理の JavaScript パッケージは,Browserify を使えばインポートできる.では,CSS はどうやってインポートすれば良いのか?例えば,bootstrap を npm でインストールして bundle.css に取り込むにはどうすれば良いのか?調べた結果をまとめる.

前提

タスクランナーとして Gulp を使う.また,各パッケージのフォルダ構成に依存しない方法を探す.また,下記の例では bootstrap を使用しているが, npm i --save bootstrap にてインストール済みとする.

Parcelify を使う

JavaScript のインポートに Browserify を使う場合,プラグインの一つである Parcelify の利用はメジャーな方法だろう.逆に,JavaScript をまったく使わないプロジェクトではダミーが必要になると思う.

Parcelify を使う場合,package.jsonstyle 要素にインポートする CSS ファイルを列挙する必要がある.

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

例えば,bootstrap と自前の CSS ファイルの両方をインポートする場合は上記のように書く(他の項目については省略した).そして,Gulp のタスクは次の通り.

gulpfile.coffee
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/"

これで,browserify タスクを実行すれば package.jsonstyle 属性に指定した CSS ファイルが一つにまとめられpublic/bundle/bundle.css に書き出される.

この方法の微妙なところは,package.json にインポートする CSS ファイルの相対パスを列挙する必要があるところで,パッケージのフォルダ構成が変わると,毎回設定しなおす必要がある.もしかしたら,各パッケージの package.json から情報を引っ張ってくる方法があるのかも知れないが,調べた限りでは分からなかった.

rework を使う

rework のプラグイン rework-npm は,各パッケージの package.json を調べて,必要な CSS ファイルをインポートしてくれる.rework を使う方法は複数あるが,Gulp から使うために gulp-rework を用いることにする.

まず,インポートするパッケージを列挙した css ファイルを用意する.例えば,bootstrap をインポートする場合,次のように書く.

src/main.css
@import "bootstrap";

/* その他の項目は省略 */

そして,Gulp のタスクは次の通り.

gulpfile.coffee
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/"

これで,css タスクを実行すれば,bootstrap を含んだ CSS が public/bundle/main.css にできる.

この方法だと,bootstrap のフォルダ構成をいちいち調べなくても必要なファイルがインポートできる.ただし,これがうまくいくのは,各パッケージの package.jsonstyle 属性があり,適切に記述されている場合のみである.style 属性がないパッケージについては,個別にフォルダ構成を調べなければならず,結局 Parcelify を使う場合と同じ手間がかかる.

まとめ

npm管理のライブラリが提供する css のインポート方法として,Parcelify を使う方法と rework を使う方法についてまとめた.
他にもっと良い方法があったら教えてください.

参考

24
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
jkawamoto
博士(情報学)専門はクラウドコンピューティング、プライバシ&セキュリティ保護。最近は分散ストレージとクラウドで学術アルゴリズムを効率的に評価することに取り組んでいます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
24
Help us understand the problem. What is going on with this article?