はじめに

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

対象バージョン

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

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