我使用rails new demo -j esbuild --css tailwind. 我正在antd為組件使用包，并希望將 ant 設計樣式表與順風樣式表一起使用。
Tailwind有一種方法可以將外部樣式表添加到其默認樣式中。我使用它并將application.tailwind.css檔案設定為：
@import "~antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
現在，當我運行時./bin/dev，antd既不應用樣式，生成的app/assets/builds/application.css檔案中也不存在這些樣式類。
看起來像順風覆寫了螞蟻的設計風格。
如果我保留application.tailwind.css并添加
import 'antd/dist/antd.css';
到我的index.js根檔案，只有這樣才會antd應用樣式并出現在生成的app/assets/builds/application.css. 但隨后 tailwindcss 類被洗掉。
如何在生成的檔案中同時擁有 ant 設計風格和 tailwind 風格app/assets/builds/application.css？
uj5u.com熱心網友回復：
這就是我最終將 Rails 7 中我自己的樣式表與 esbuild 和 TailwindCSS 鏈接的方式。
當前，如果您運行rails new demo --css tailwindRails 將使用tailwindcss-rails gem
但是，如果您在創建新應用程式時像使用 esbuild 一樣傳遞 javascript 選項，它將cssbundling-rails gem改用 。rails new demo -j esbuild --css tailwind.
cssbundling-rails gem 的檔案說
如果您想將 @import 陳述句用作 Tailwind application.js 檔案的一部分，您需要將 Tailwind 配置為使用 postcss，然后使用 postcss-import。但是您也應該考慮直接參考您的其他 CSS 檔案，而不是將它們全部捆綁到一個大檔案中。快取更好，設定更簡單。您可以通過擴展 application.html.erb 中的 stylesheet_link_tag 來參考其他 CSS 檔案，如下所示：<%= stylesheet_link_tag "application", "other", "styles", "data-turbo-track": "reload" %>。
https://github.com/rails/cssbundling-rails#how-do-i-import-relative-css-files-with-tailwind
我創建了一個名為users下的新 css 檔案app/assets/stylesheets/users.css
在application.html.erb我添加了新users的樣式表之后application的樣式表stylesheet_link_tag。
<%= stylesheet_link_tag "application", "users", "data-turbo-track": "reload" %>
在影像和構建之后app/assets/config/manifest.js添加//= link users.css。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/400333.html
標籤：红宝石轨道 蚂蚁 顺风-css esbuild ruby-on-rails-7
下一篇：HTTP and Flask Basics - Introduction to Curl and Chrome Dev Tools