我一直在尝试将 Tailwind 添加到 Solidus 商店,但没有成功。按照在任何 Rails 应用程序上执行的常规方式添加 Tailwind 不起作用,因为 Tailwind 组件无法正确显示。不幸的是,我没有找到任何关于如何实现这一目标的指南。
基本上,我想将更改应用于 Solidus' Starter Frontend使用顺风。
不过,将 Tailwind 的 CDN 添加到 storefront.html.erb
似乎可行(文本非常小)。
步骤
- 我已遵循 Getting Started 上的每一个步骤来自 Solidus 官方文档的页面,但使用
rails new Amazing_store --css tailwind --skip-javascript
而不仅仅是rails new Amazing_store --skip-javascript
。 - 然后,当出现提示时,我选择安装 solidus_starter_frontend店面。
我查过this repository (在 this GitHub issue 上找到)并将其与我自己的代码进行比较,我找不到与我的代码有任何区别。
您知道如何实现这一目标吗?
最佳答案
将其添加到 StackOverflow 以防万一有人需要它。
感谢 kennyadsl 的 answer参加我的 GH 讨论和这个 thread关于 Solidus official Slack channel ,以下是让 Solidus 商店与 Tailwind 一起运行的步骤:
rails new amazing_store # avoid the --skip-javascript flag here
cd amazing_store
bundle add 'solidus'
bin/rails generate solidus:install # devise: Y, payment: none, frontend: starter
bundle add tailwindcss-rails
rails tailwindcss:install
在layout/storefront.html.erb
中:
- <%= stylesheet_link_tag 'solidus_starter_frontend', media: 'screen' %>
+ <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
请注意,如果这样做,您在实现 Tailwind 时将丢失 Solidus Starter 前端的所有设计。这就是有趣的部分开始的地方!
然后,启动 Rails:
bin/dev
您现在可以像平常一样将 Tailwind 类添加到您的 HTML 中!
关于javascript - 将 Tailwind 添加到 Solidus 商店,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74903214/