Rails 7-使用daisyUI和导入映射-rails

Question

我正在尝试构建一个新的Rails 7项目，测试Hotwire和一些新的默认内容。我对离开Webpacker (也许会做出反应)的想法感到兴奋。但我很难弄清楚如何让daisyUI在新的工具链中使用Tailwind。

我用--css tailwind创建了这个应用程序。我运行了./bin/importmap pin daisyui，它为config/importmap.rb添加了很多行。我将require("daisyui")添加到config/tailwind.config.js.中的插件数组中

但是当我运行./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中。

Answer 1

看起来，目前还没有一种方法来使用第三方插件与独立的尾风CLI。现在，对我来说最好的解决方案就是在我的layouts/application.html.erb中添加到CDN的链接。

<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css" %>

我想我正在失去从daisyUI削减不必要的CSS的尾风，但这不是一个重要的关注在这个阶段。

Answer 2

对我来说，这个问题已经解决了，通过国家预防机制添加大玉，然后把它纳入tailwind.config.js的要求，因为它是在官方网站上提到的。现在似乎没有办法将它与导入映射一起使用。

module.exports = {plugins: [require("daisyui")]}