Rails 7 - importmap-rails での daisyUI の使用
概要
新しい Rails 7 プロジェクトを構築して、Hotwire と新しいデフォルトのもののいくつかをテストしようとしています。私は Webpacker (そしておそらく React) を残すという考えに興奮しています。しかし、新しいツールチェーンで daisyUI を Tailwind と連携させる方法を理解するのに苦労しています。
–css tailwind を使用してアプリを作成しました。 ./bin/importmap pin daisyui を実行すると、config/importmap.rb に大量の行が追加されました。そして、config/tailwind.config.js のプラグインの配列に require(“daisyui”) を追加しました。
しかし、./bin/dev を実行すると、次のようになります。
13:30:55 web.1 | started with pid 36044
13:30:55 css.1 | started with pid 36045
13:30:56 web.1 | => Booting Puma
13:30:56 web.1 | => Rails 7.0.2.3 application starting in development
13:30:56 web.1 | => Run `bin/rails server --help` for more startup options
13:30:56 web.1 | Puma starting in single mode...
13:30:56 web.1 | * Puma version: 5.6.4 (ruby 3.1.1-p18) ("Birdie's Version")
13:30:56 web.1 | * Min threads: 5
13:30:56 web.1 | * Max threads: 5
13:30:56 web.1 | * Environment: development
13:30:56 web.1 | * PID: 36044
13:30:56 web.1 | * Listening on http://127.0.0.1:3000
13:30:56 web.1 | * Listening on http://[::1]:3000
13:30:56 web.1 | Use Ctrl-C to stop
13:30:57 css.1 | node:internal/modules/cjs/loader:933
13:30:57 css.1 | const err = new Error(message);
13:30:57 css.1 | ^
13:30:57 css.1 |
13:30:57 css.1 | Error: Cannot find module 'daisyui'
13:30:57 css.1 | Require stack:
13:30:57 css.1 | - /Users/phillip/Dev/test_project/config/tailwind.config.js
13:30:57 css.1 | - /snapshot/tailwindcss/lib/cli.js
13:30:57 css.1 | - /snapshot/tailwindcss/standalone-cli/standalone.js
13:30:57 css.1 | 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
13:30:57 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
13:30:57 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1819:46)
13:30:57 css.1 | at Function.Module._load (node:internal/modules/cjs/loader:778:27)
13:30:57 css.1 | at Module.require (node:internal/modules/cjs/loader:1005:19)
13:30:57 css.1 | at Module.require (pkg/prelude/bootstrap.js:1719:31)
13:30:57 css.1 | at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:21:22)
13:30:57 css.1 | at require (node:internal/modules/cjs/helpers:94:18)
13:30:57 css.1 | at Object.<anonymous> (/Users/phillip/Dev/test_project/config/tailwind.config.js:20:5)
13:30:57 css.1 | at Module._compile (node:internal/modules/cjs/loader:1101:14)
13:30:57 css.1 | at Module._compile (pkg/prelude/bootstrap.js:1758:32) {
13:30:57 css.1 | code: 'MODULE_NOT_FOUND',
13:30:57 css.1 | requireStack: [
13:30:57 css.1 | '/Users/phillip/Dev/test_project/config/tailwind.config.js',
13:30:57 css.1 | '/snapshot/tailwindcss/lib/cli.js',
13:30:57 css.1 | '/snapshot/tailwindcss/standalone-cli/standalone.js'
13:30:57 css.1 | ],
13:30:57 css.1 | pkg: true
13:30:57 css.1 | }
13:30:57 css.1 | exited with code 0
13:30:57 system | sending SIGTERM to all processes
13:30:57 web.1 | - Gracefully stopping, waiting for requests to finish
13:30:57 web.1 | Exiting
13:30:57 web.1 | terminated by SIGTERM
私に欠けているものは非常に基本的なものだと確信していますが、それは何でしょうか?
import “daisyui” も import “daisy” も app/javascripts/application.js に追加していないと言えます。
解決策
現在のところ、スタンドアロンの Tailwind CLI でサードパーティのプラグインを使用する方法はないようです。私にとって現時点での最善の解決策は、layouts/application.html.erb に CDN へのリンクを追加することです。
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" %>
Tailwind が daisyUI から不要な CSS を削除することに失敗していると思いますが、それは現段階では重要な懸念事項ではありません。