Zenn
🦾

yarn だけで Rails6.1+Simpacker+PostCSS+TailwindCSS 環境を作る

2021/01/01に公開
Rails
yarn
Tailwind CSS
PostCSS
Simpacker
tech

モジュールバンドラ嫌いってわけではないです。

TL;DR

  • 下記記事を導入した Rails6.1 プロジェクトを動かしてみるだけです
  • Simpacker 用の manifest.json を出力する Node.js スクリプト を作った | 北山淳也 | zenn
  • rails のセットアップや docker-compose 下で rails new する方法については今回は省きます。以下なども合わせて見てみてください
  • docker-compose 下で rails new して Rails6.1+deviseを試す | 北山淳也 | zenn

Simpacker を webpack なしで導入する

Gemfile を開いて

Gemfile
...(前略)
group :development do
    gem "simpacker"  # group :development do 配下にこれを追記
...(後略)

app コンテナの bash (ローカルでrailsをセットアップしてるならローカルのターミナル) で

bundle install
bundle exec rails simpacker:install
...
Simpacker successfully installed 🎉 🍰

webpack は消します。package.json の devDependencies はいったん空に。

package.json
package.json
{
  "private": true,
  "devDependencies": {
  }
}

rails simpacker:install すると npm で入ってしまうので
不要なファイルを消して yarn しなおします。
ターミナルで

rm -rf node_modules/
rm package-lock.json
rm webpack.config.js
yarn install

これで余計な package のない Simpacker がセットアップできます。

こっちでも同じことをやっています。
docker-compose 下でやる時はこっちの方が手順を追いやすいかも。

TailwindCSS + PostCSS を導入する

ターミナルで以下。

yarn add tailwindcss
yarn run tailwindcss init -p
yarn add postcss postcss-cli postcss-import postcss-nested --dev

postcss.config.js をこんな感じにしておきます。

postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
}

こっちでも同じようなことをやっています。

Simpacer 用の manifest.json を出力する Node.js スクリプトを用意する

プロジェクト直下に output_manifest_js.js という名前でこのファイルを置きます。

https://gist.github.com/JUNKI555/8f5a3616be630840b65dbb13769c51c3

package.json に scripts を用意する

こんな感じです。

package.json
{
  "private": true,
  "scripts": {
    "cleancss": "rimraf ./public/packs/css/",
    "postcss": "postcss ./app/assets/stylesheets/**/*.css -d ./public/packs/css/",
    "output_manifest": "node output_manifest_js.js public"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.4",
    "rimraf": "^3.0.2",
    "postcss": "^8.1.14",
    "postcss-cli": "^8.3.0",
    "postcss-import": "^13.0.0",
    "postcss-nested": "^5.0.2",
    "tailwindcss": "^2.0.1",
    "yarn-run-all": "^3.1.1"
  }
}

※このタイミングで手元の package.json と devDependencies に差異がある場合は
　上記のように編集した後に yarn instatall してもらえればと思います

scripts こんな感じで使えます。

  • yarn cleancss
    　- ./public/packs/css/ 配下を全部消す, ファイルの場所を変えたりした時に
  • yarn postcss
    • PostCSS トランスパイルを実行して ./public/packs/css/ 配下に出力
  • yarn output_manifest
    • public/packs/manifest.json を生成する

TailwindCSS を使った CSS を用意する

app/assets/stylesheets 配下などに以下のように css を用意します。

app/assets/stylesheets/tailwindcss.css
/* tailwindcss の class を全て有効にするcss。開発中は便利。 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
app/assets/stylesheets/application.css
nav {
　/* @apply で tailwiindcss の class をまとめて割り当てられる */
  @apply py-2 border-b-4 border-pink-400;

  .nav-button {
    @apply h-12 px-3 py-2 m-2 text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg hover:bg-indigo-800;
  }
}

また、 rails の erb にも css を当てられますね。

app/views/home/index.html.erb
<h1 class="m-2 w-3/12 border-8 border-pink-400">Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

link_to なんかにはこんな感じです。

<%= link_to "リンクの文言", "パス", class: "クラス名" %>

stylesheet_pack_tag で CSS を読み込む

例えば app/views/layouts/application.html.erb にこんな感じにして
上記で用意した css を stylesheet_pack_tag で読み込ませます。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag "application", media: "all" %>
    <%= stylesheet_pack_tag "tailwindcss", media: "all" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Simpakcer は stylesheet_pack_tag ヘルパーを使って
用意した public/packs/manifest.json から該当ファイルへのリンクを生成してくれます。

PostCSS トランスパイルを実行する

あとは css を適宜編集し、都度トランスパイルしてやるだけです。
ターミナルで

yarn postcss
yarn output_manifest

都度トランスパイルを実施するのが面倒な人は package.json の

package.json
    "postcss": "postcss ./app/assets/stylesheets/**/*.css -d ./public/packs/css/",

ここに -w オプションをつけて watch するようにしたりすれば良いでしょう。
（私は都度自分でトランスパイルするのが好きです）

これでOK! 動かしてみましょう。

例えば devise の習作にこんな感じでスタイルを当てるとこんな感じに見た目が変わります。

これが

こんな感じ！

ボタンの見た目関係はここを参考にしました。TailwindCSS 便利。

補足：TailwindCSS の VSCode 拡張機能を ERB でも有効にする

Setting.json に以下を追加して erb を html として解釈させればOKです。
設定したら VSCode の再起動も忘れずに。

Setting.json
    "files.associations": {
        "*.html.erb": "html"
    }

まとめ

小さなプロジェクトなら webpack を使うより設定が簡単に済むので私は好きです。

今回のリポジトリはこちらです。
https://github.com/JUNKI555/rails_authentication_practice01

Discussion