Closed4

CSSフレームワークにTailwindを指定してRailsプロジェクトを始めるとどんな設定になっているのか

コータコータ

タイトル通り。サンプルを動かすためだけに検証するため、余計なものは入れずスキップしている。

rails new tailwind-css -c tailwind --skip-action-cable --skip-action-text --skip-action-mailer --skip-action-mailbox --sukip-jbuilder
コータコータ

gemfile（一部）

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
gem "tailwindcss-rails"
  • アセットパイプラインはSprocketsが入ってる
  • JavaScriptバンドラーは入っておらず、ImportMapが入ってる
  • Turbo、Stimulusはデフォルトで入る
  • Tailwindcssのラッパーライブラリが入る（gem）
コータコータ

なぜTailwindcssのラッパーライブラリが入るのか？（なぜnpmパッケージで入らないのか？）

  • ImportMapが入っていることにより、JavaScriptはCDNなどから直接読み込む
  • そのため、この構成だとNode.jsを使わない → つまりnpmも使わない
コータコータ

app/assets/config/manifest.jsはRailsアプリケーションにおけるアセットパイプラインの設定ファイル。Sprocketsに対して、どのファイルをアセットパイプラインに乗せるかを指示する。

// app/assets/imagesディレクトリ内のすべてのファイル
//= link_tree ../images

// app/assets/stylesheetsディレクトリ内のすべてのcssファイル
//= link_directory ../stylesheets .css

// app/assets/javascriptディレクトリ内のすべてのjsファイル
//= link_tree ../../javascript .js

//= link_tree ../../../vendor/javascript .js

// app/assets/buildsディレクトリ内のすべてのファイル
//= link_tree ../builds

ただ、このプロジェクトではImportMapを利用しているので、JavaScriptファイルはアセットパイプラインで管理する必要がない。

//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

なぜこの記述が入っているのか、わからない。自分の理解が間違っているかもしれない。

このスクラップは2024/09/15にクローズされました