[Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法

はじめに

Rails 5.1で導入された webpacker を利用して軽量CSSフレームワーク Spectre.css を適用する方法を残しておきます。

対象バージョン

• macOS 10.12.5
• Rails v5.1.1
• Ruby v2.4.1
• webpacker v2.0
• webpack v2.6.1
• node v7.10.0
• yarn v0.24.6

前提条件

Webpackerのインストールが完了していること。

Spectre.css の適応方法

yarnでインストール

$ yarn add spectre.css

./node_modules/spectre.css/ の配下に一式インストールされます。

CSS周りの構成はwebpackerのGithubを参考に、以下のように設定します。

app/javascript/packs/application.js

...
import '../app-style'

app/javascript/app-style.sass

@import '~spectre.css/dist/spectre'

拡張子を付けるとWarningが出るので、拡張子は省いて設定します。

app/views/layouts/application.html.erb

...
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
...

コンパイル

コンパイルには bin/webpack を使います。

$ bin/webpack

動作確認

$ bin/rails s

http://localhost:3000 にアクセスしてSpectre.cssのスタイルが適用されていれば成功です！🎉