cssライブラリ調査、動作確認 #84
Projects
Comments
|
|
レスポンシブで軽量な20のCSSフレームワーク | UX MILK
Milligram - A minimalist CSS framework
|
|
Rails 7 をちょこっと試す（さらば、Webpacker 編） - Qiita
Bulma: Free, open source, and modern CSS framework based on Flexbox
|
|
vue.jsの3に対応していて、cssbundlingで簡単に実装できそうなtailwindを選択 https://github.com/rails/cssbundling-rails Gemfile gem 'cssbundling-rails'bundle後、下記コマンドを実行 $ bin/rails css:install:tailwind
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
File unchanged! The supplied flag value not found! app/assets/config/manifest.js
Stop linking stylesheets automatically
gsub app/assets/config/manifest.js
File unchanged! The supplied flag value not found! .gitignore
File unchanged! The supplied flag value not found! .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/kasai441/environment/ruumarker/bin/dev? (enter "h" for help) [Ynaqdhm] y
force bin/dev
Install Tailwind (+PostCSS w/ autoprefixer)
create tailwind.config.js
create app/assets/stylesheets/application.tailwind.css
run yarn add tailwindcss@latest postcss@latest autoprefixer@latest from "."
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.18", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 39 new dependencies.
info Direct dependencies
├─ autoprefixer@10.4.4
├─ postcss@8.4.12
└─ tailwindcss@3.0.23
info All dependencies
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @types/parse-json@4.0.0
├─ acorn-node@1.8.2
├─ arg@5.0.1
├─ autoprefixer@10.4.4
├─ binary-extensions@2.2.0
├─ camelcase-css@2.0.1
├─ chokidar@3.5.3
├─ cosmiconfig@7.0.1
├─ cssesc@3.0.0
├─ defined@1.0.0
├─ detective@5.2.0
├─ didyoumean@1.2.2
├─ dlv@1.1.3
├─ fast-glob@3.2.11
├─ fastq@1.13.0
├─ fraction.js@4.2.0
├─ is-binary-path@2.1.0
├─ lilconfig@2.0.5
├─ merge2@1.4.1
├─ normalize-range@0.1.2
├─ object-hash@2.2.0
├─ path-type@4.0.0
├─ postcss-js@4.0.0
├─ postcss-load-config@3.1.4
├─ postcss-nested@5.0.6
├─ postcss-selector-parser@6.0.10
├─ postcss@8.4.12
├─ queue-microtask@1.2.3
├─ quick-lru@5.1.1
├─ readdirp@3.6.0
├─ reusify@1.0.4
├─ run-parallel@1.2.0
├─ tailwindcss@3.0.23
├─ util-deprecate@1.0.2
├─ xtend@4.0.2
└─ yaml@1.10.2
✨ Done in 12.67s.
Add build:css script
Add "scripts": { "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" } to your package.jsonコンソールの指示に従って手動でpackage.jsonにbuild:cssを追加した。 bin/devを実行したところ、実行できた。フォントが少し変わったように見える。 |
|
home/indexのclassを変更してtailwindが効いていることを確認 |
|
yarnが古いと言われたので、アップデートする nodenv default-packages install --all無事yarnをアップデート完了 |
kasai441
added a commit
that referenced
this issue
Apr 4, 2022
kasai441
added a commit
that referenced
this issue
Apr 4, 2022
kasai441
added a commit
that referenced
this issue
Apr 5, 2022
|
Rspec、dev環境では動いたがテスト環境だとapplication.cssがないと怒られる。 Rails 6: How to install css-bundling with Tailwind JIT - DEV Community
- name: Build TailwindCSS
run: yarn build:cssを追加。 |
kasai441
added a commit
that referenced
this issue
Apr 5, 2022
kasai441
added a commit
that referenced
this issue
Apr 5, 2022
cssbundlingによるtailwindのインストールと動作確認 #84
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
アセットコンパイルのライブラリ調査の際に、CSSも同時に見る必要があるため、 #83 と並行して調査
The text was updated successfully, but these errors were encountered: