Semantic UIをRails + Webpackerで使う

rails semantic-ui css

Semantic UI
css frameworkで使ったことないものを利用してみようと思って、installしたら少し嵌ってしまったのでメモ。

ちなみに、当初はTailwind CSS を使ってみようと思ったのですが、こっちはどうも慣れないのとclassがhtmlにつきまくってメンテしづらそうな印象だったのでやめました。

Introduction

素でyarn addするとgulpのversion不一致のエラーになったので、（対応方法はあるんだけど）一瞬諦めかけたのですが、doabit/semantic-ui-sass だとさくっとInstallできて便利そうと言うことでこちらを試してみました。

Installation

READMEに書いてはいるのですが、このままだと少し足りないので補足していきます。 https://github.com/doabit/semantic-ui-sass#ruby-on-rails-version-6

1. yarn

yarn add jquery popper.js semantic-ui-sass

これはREADMEと同じで良いです。

2. config/webpack/environment.js

const webpack = require('webpack')

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.config.resolve.alias = { jquery: 'jquery/src/jquery' }

ちゃんとしたドキュメントが見つからず、少し予想が入ってますが、 library内部で同梱しているjQueryが呼ばれるのを阻止するために resolve.alias を使って jquery/src/jqueryを呼ぶようにしています（多分）。

他のやり方としては pluginの設定の方で $: 'jquery/src/jquery', みたいにしておくのでも良いはずです。 が、冗長なので、resolve.aliasで対応。

3. app/javascript/packs/application.js

require('semantic-ui-sass')
import '../src/stylesheets/application'

jsはsemantic-ui-sassを呼び出すだけ。 cssもwebpackで管理したいので、別ファイルをimportさせます。 （ここはassets使う人もいるかもしれませんね。）

4. app/javascript/src/stylesheets/application.scss

$icons-font-path: '~semantic-ui-sass/icons';
$flags-image-path: '~semantic-ui-sass/images';
@import "~semantic-ui-sass";

cssも@importすれば良いとREADMEに書いてますが、追加でiconとfontのパス指定が必要です。

5. app/views/layouts/application.html.haml

-    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
+    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

（一応触れておきます。）webpack用にcssの読み込むメソッドも変えておきます。