我正在嘗試在我的 Rails 7 應用程式中使用 npm 包“tailwindcss-flip”。包檔案有以下說明：
安裝 tailwindcss-flip 包：
使用 NPM 安裝
npm install tailwindcss-flip --save-dev
使用 Yarn 安裝
紗線添加 tailwindcss-flip --dev
將插件添加到您的 tailwind.conf.js 檔案中：
plugins: [require("tailwindcss-flip")]
我的問題是，我確實將包固定在 importmap 中，但出現以下錯誤：
Error: Cannot find module 'tailwindcss-flip'
知道這如何在 Rails 7（無 Webpacker）中作業。
uj5u.com熱心網友回復：
我假設你正在使用tailwindcss-railsgem。即使您運行rails new app --css tailwind. 它使用與第一方插件捆綁在一起的獨立 tailwind 可執行檔案https://tailwindcss.com/blog/standalone-cli 。所以任何插件都@tailswindcss/*應該開箱即用。
要使用任何其他 tailwind 插件，您必須運行完整的 node.js 版本的 tailwind。Rails 7 的方式是使用cssbundling-rails.
# Gemfile
# remove gem 'tailwindcss-rails'
gem 'cssbundling-rails'
bin/bundle install
bin/rails css:install:tailwind
將構建腳本添加到 package.json
"scripts": {
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
},
之后添加您喜歡的任何插件。在你的情況下：
yarn add tailwindcss-flip --dev
將插件添加到順風配置。默認情況下是（您不再需要的tailwind.config.js獨立tailwindcss-rails版本使用）config/tailwind.config.js
plugins: [
require("tailwindcss-flip"),
],
在您的布局中，您應該只有application樣式表。消除stylesheet_link_tag "tailwind"
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
要開始編譯您的 css，請運行構建腳本package.json
yarn build:css --watch
這應該輸出app/assets/builds/application.css檔案。它由 Rails 資產管道（鏈輪）提供服務。如果您遇到 sprocket 錯誤，請重新啟動所有內容，清除快取，檢查app/assets/config/manifest.js是否包含//= link_tree ../builds.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/452373.html