Rails 7 -将daisyUI与importmap-rails配合使用

ecbunoof  于 2022-11-04  发布在  Ruby
关注(0)|答案(2)|浏览(124)

我正在尝试构建一个新的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

osh3o9ms

osh3o9ms1#

看起来目前还没有一种方法可以将第三方插件与独立的Tailwind CLI一起使用。现在对我来说,最好的解决方案是在我的layouts/application.html.erb中添加一个指向CDN的链接:

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

我想我在Tailwind上失去了从daisyUI中修剪掉不需要的CSS,但这在这个阶段不是一个重要的问题。

gkl3eglg

gkl3eglg2#

对我来说,通过npm添加daisyui,然后把它放到tailwind.config.js的要求中就解决了这个问题,就像官方网站上提到的那样。现在似乎没有办法用importmaps来使用它。
module.exports = {plugins: [require("daisyui")]}

相关问题