search

djkazunoko / nijikai-go

テック系イベントの二次会参加者募集ツール
0 stars 0 forks source link

daisyUIを導入する #69

Closed djkazunoko closed 6 months ago

djkazunoko commented 6 months ago

daisyUI を導入する

djkazunoko commented 6 months ago

yarn init -2実行時のログ

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ corepack enable

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn init -2
Corepack is about to download https://repo.yarnpkg.com/4.1.1/packages/yarnpkg-cli/bin/yarn.js.

Do you want to continue? [Y/n] y
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 62ms

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn -v
4.1.1
djkazunoko commented 6 months ago

yarn add -D daisyui@latest実行時のログ

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn add -D daisyui@latest
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + daisyui@npm:4.10.2, camelcase-css@npm:2.0.1, css-selector-tokenizer@npm:0.8.0, cssesc@npm:3.0.0, culori@npm:3.3.0, fastparse@npm:1.1.2, picocolors@npm:1.0.0, postcss-js@npm:4.0.1
➤ YN0000: └ Completed in 1s 126ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 8 packages were added to the project (+ 3.88 MiB).
➤ YN0000: └ Completed in 0s 275ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 460ms
djkazunoko commented 6 months ago

nodeLinker: node-modulesを設定してからyarn add -D daisyui@latestした時のログ

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn add -D daisyui@latest
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + daisyui@npm:4.10.3, camelcase-css@npm:2.0.1, css-selector-tokenizer@npm:0.8.0, cssesc@npm:3.0.0, culori@npm:3.3.0, fastparse@npm:1.1.2, picocolors@npm:1.0.0, postcss-js@npm:4.0.1
➤ YN0000: └ Completed in 0s 776ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 2.78 MiB).
➤ YN0000: └ Completed in 0s 249ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 258ms
➤ YN0000: · Done in 1s 315ms
djkazunoko commented 6 months ago

yarn v4のzero installは辞めた

上記のようによくわからない箇所がいくつかあったので慣れているnode_modulesにインストールする形式を選択した。 (そのため上記のよくわからない箇所は調査していない)

djkazunoko commented 6 months ago

cssbundling-railsをbundle installした後に、bin/rails css:install:tailwindした時のログ

~/Desktop/nijikai-go chore/#69/add-daisyui
❯ bin/rails css:install:tailwind
       apply  /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.0/lib/install/tailwind/install.rb
       apply    /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.0/lib/install/install.rb
    Build into app/assets/builds
       exist      app/assets/builds
   identical      app/assets/builds/.keep
   unchanged      app/assets/config/manifest.js
    Stop linking stylesheets automatically
        gsub      app/assets/config/manifest.js
   unchanged      .gitignore
   unchanged      .gitignore
    Remove app/assets/stylesheets/application.css so build output can take over
      remove      app/assets/stylesheets/application.css
    Default application.html.erb is missing!
            Add <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.
      append      Procfile.dev
    Add bin/dev to start foreman
    conflict      bin/dev
    Overwrite /Users/kazuki/Desktop/nijikai-go/bin/dev? (enter "h" for help) [Ynaqdhm] Y
       force      bin/dev
  Install Tailwind (+PostCSS w/ autoprefixer)
      create    tailwind.config.js
    conflict    app/assets/stylesheets/application.tailwind.css
  Overwrite /Users/kazuki/Desktop/nijikai-go/app/assets/stylesheets/application.tailwind.css? (enter "h" for help) [Ynaqdhm] Y
       force    app/assets/stylesheets/application.tailwind.css
         run    yarn add tailwindcss@latest postcss@latest autoprefixer@latest from "."
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + autoprefixer@npm:10.4.19, postcss@npm:8.4.38, tailwindcss@npm:3.4.3, @alloc/quick-lru@npm:5.2.0, @isaacs/cliui@npm:8.0.2, @jridgewell/gen-mapping@npm:0.3.5, and 165 more.
➤ YN0000: └ Completed in 1s 286ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 129 packages were added to the project (+ 20.88 MiB).
➤ YN0000: └ Completed in 0s 902ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 615ms
➤ YN0000: · Done in 3s 847ms
  Add build:css script
  Add build:css script
         run    npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" from "."
         run    yarn build:css from "."
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Done in 333ms.
         run  bundle install
Bundle complete! 32 Gemfile dependencies, 132 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
djkazunoko commented 6 months ago

jsbundling-railsをbundle installした後に、bin/rails javascript:install:esbuildした時のログ

~/Desktop/nijikai-go chore/#69/add-daisyui*
❯ bin/rails javascript:install:esbuild
       apply  /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/esbuild/install.rb
       apply    /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/install.rb
    Compile into app/assets/builds
       exist      app/assets/builds
   identical      app/assets/builds/.keep
   unchanged      app/assets/config/manifest.js
   unchanged      .gitignore
   unchanged      .gitignore
    Default application.html.erb is missing!
            Add <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> within the <head> tag in your custom layout.
    Add bin/dev to start foreman
   identical      bin/dev
       apply    /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/install_procfile.rb
      append      Procfile.dev
  Install esbuild
         run    yarn add esbuild from "."
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + esbuild@npm:0.20.2, @esbuild/aix-ppc64@npm:0.20.2, @esbuild/android-arm64@npm:0.20.2, @esbuild/android-arm@npm:0.20.2, @esbuild/android-x64@npm:0.20.2, and 19 more.
➤ YN0000: └ Completed in 0s 340ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 2 packages were added to the project (+ 9.86 MiB).
➤ YN0000: └ Completed in 0s 595ms
➤ YN0000: ┌ Link step
➤ YN0007: │ esbuild@npm:0.20.2 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 811ms
➤ YN0000: · Done in 1s 784ms
  Add build script
         run    npm pkg set scripts.build="esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" from "."
         run    yarn build from "."
✘ [ERROR] Could not resolve "@hotwired/turbo-rails"

    app/javascript/application.js:2:7:
      2 │ import "@hotwired/turbo-rails"
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@hotwired/turbo-rails" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "controllers"

    app/javascript/application.js:3:7:
      3 │ import "controllers"
        │        ~~~~~~~~~~~~~
        ╵        "./controllers"

  Use the relative path "./controllers" to reference the file "app/javascript/controllers/index.js".
  Without the leading "./", the path "controllers" is being interpreted as a package path instead.

2 errors
node:child_process:929
    throw err;
    ^

Error: Command failed: /Users/kazuki/Desktop/nijikai-go/node_modules/@esbuild/darwin-x64/bin/esbuild app/javascript/application.js --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets
    at genericNodeError (node:internal/errors:984:15)
    at wrappedFn (node:internal/errors:538:14)
    at checkExecSyncError (node:child_process:890:11)
    at Object.execFileSync (node:child_process:926:15)
    at Object.<anonymous> (/Users/kazuki/Desktop/nijikai-go/node_modules/esbuild/bin/esbuild:221:28)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 69216,
  stdout: null,
  stderr: null
}

Node.js v20.12.2
         run  bundle install
Bundle complete! 33 Gemfile dependencies, 133 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
djkazunoko commented 6 months ago

ここまでの流れを整理

daisyUIを使いたい

↓

rails/tailwindcss-railsではdaisyUIが使えない(CDNのみ可能)

↓

rails/cssbundling-railsとrails/jsbundling-railsでtailwindcssをインストールする必要がある

↓

node.jsとyarn(またはnpm)が必要

↓

「rails/importmap-rails + rails/tailwindcss-rails」の構成から「rails/cssbundling-rails + rails/jsbundling-rails」に変更する

djkazunoko commented 6 months ago

CDN版のdaisyUIを使うことにした。

https://daisyui.com/docs/cdn/

CDN files are not recommended for production because you can't purge unused styles and file size will be large.

CDN版は非推奨になっているが、これがどれくらい速度に影響するかはデプロイしてみないとわからない。 yarnで入れるとなると「rails/importmap-rails + rails/tailwindcss-rails」の構成から「rails/cssbundling-rails + rails/jsbundling-rails」に変更する必要があり、これに時間をかけたくないので、当面はCDN版で進める。必要になったらやるということで。

djkazunoko commented 6 months ago

70 がマージされたため、closeします