Webpacker + images + Spectre.css

前提

以下をインストール済み

• Webpacker 3.2.0
• spectre.css 0.5.0

l-chika.hatenablog.com

参考

• Webpacker: Assets Docs
• Rails アプリに Webpacker を導入する
• Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜
• webpackerを使用した時にcssをどこに置くのかについて

step

app/javascript の構成

$ tree app/javascript/
app/javascript/
├── images
│   └── logo.png
├── packs
│   └── application.js
└── styles
    ├── app-style.sass
    └── base.scss

app/javascript/packs/application.js

• 各stylesheetのimport
• require.contextでimages配下の画像を読み込み(個別にimportをしない)

import 'styles/app-style'
import 'styles/base'
require.context('images', true, /\.(png|jpg|jpeg|svg)$/)

app/javascript/styles/app-style.sass

• icon も利用するtame spectre-icons もimport

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

app/javascript/styles/base.scss

独自のcss

...
.logo {
  width: 110px;
}
...

テンプレート

<%= image_tag(asset_pack_path('images/logo.png'), class: 'logo') %>

参考

Ruby on Rails 5.1 + webpack: スタートアップガイド (OIAX BOOKS)

Ruby on Rails 5アプリケーションプログラミング