はじめに
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のスタイルが適用されていれば成功です!🎉