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の読み込むメソッドも変えておきます。
