[Middleman 3] Middleman: Sprockets の append_path に bower_components や node_modules を追加して require する

bower や npm インストールした JS や CSS を読み込む。

先日、リサーチした点について。

Rails-assets を利用している部分に関しては、現段階でも取り除く事ができることを思い出した。
以前にもやっていたのにすっかり忘れていた。

使い方

config.rb に設定を加える。

config.rb
# add node_modules & bower_components to sprocket's path
after_configuration do
  sprockets.append_path "#{root}/bower_components"
  sprockets.append_path "#{root}/node_modules"
end

JavaScript であればこのように、

all.js
//= require jquery/dist/jquery.js

CSS もこのように読み込める。

all.css.scss
//= require normalize.css/normalize.css

補遺

Middleman v4 で Middleman-Sprockets を使い続ける場合には、いろいろと変更が必要そうだ。