javascript - 将 Tailwind 添加到 Solidus 商店

标签 javascript ruby-on-rails ruby tailwind-css solidus

我一直在尝试将 Tailwind 添加到 Solidus 商店,但没有成功。按照在任何 Rails 应用程序上执行的常规方式添加 Tailwind 不起作用,因为 Tailwind 组件无法正确显示。不幸的是,我没有找到任何关于如何实现这一目标的指南。

基本上,我想将更改应用于 Solidus' Starter Frontend使用顺风。 不过,将 Tailwind 的 CDN 添加到 storefront.html.erb 似乎可行(文本非常小)。

步骤

  1. 我已遵循 Getting Started 上的每一个步骤来自 Solidus 官方文档的页面,但使用 rails new Amazing_store --css tailwind --skip-javascript 而不仅仅是 rails new Amazing_store --skip-javascript
  2. 然后,当出现提示时,我选择安装 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/

相关文章:

javascript - 通过在相乘成员之间插入 * 使数学方程字符串有效

javascript - 检查最新的div

ruby-on-rails - Rails服务器需要很长时间才能启动

ruby-on-rails - 如何使用 RSpec 测试路由约束

ruby-on-rails - Ruby Net::HTTP::Get 和 JSON 响应

ruby-on-rails - 了解 Ruby on Rails ActiveRecord 模型访问器

javascript - 获取第二个文本区域之后的所有输入

javascript - js 文件的简单合并导致错误和 jquery 未定义

ruby-on-rails - Heroku 上的 Puma 集群配置

ruby-on-rails - 在同一服务器上的 2 个 Rails 应用程序之间交换数据(最好是离线)