如何在 Rails 7.2 中包含来自 gem 的样式表

Question

我正在使用 simple_calendar gem 并且它工作得很好。我无法通过这样做来导入样式表

application.css

*= require simple_calendar

或

application.tailwind.css

@import "simple_calendar";

我看到 css 文件存在于 gem https://github.com/excid3/simple_calendar/blob/main/app/assets/stylesheets/simple_calendar.scss 中，我可以通过复制和粘贴它来使其工作到我自己的 css 文件中，但我希望我可以导入它。

Answer 1

对于这么小的 sass 文件，你最好直接复制粘贴它，无论如何你都会想要自定义外观。

---

dartsass-rails

这是在 sprocket 将 sass 文件选择为纯 css 之前编译 sass 文件的官方 Rails 7 方法。

bundle add dartsass-rails
bin/rails dartsass:install  

// app/assets/application.scss

@import "simple_calendar";

您必须运行

bin/dev

或

bin/rails dartsass:watch

将 application.scss 编译为

app/assets/builds/application.css

，然后由 sprocket 使用。

---

dartsass-sprockets

这是已弃用的

sassc-rails

的非官方替代品，它允许您像平常一样使用 sass 文件的链轮指令：

bundle add dartsass-sprockets

/* app/assets/application.css */

/*
 *= require simple_calendar
 */

---

顺风

上次我检查过，没有简单的方法可以将文件从 gems 导入到 tailwind 中，因为它不知道 sprocket 中的任何资产路径。您可以使用相对和绝对路径：

/* app/assets/application.tailwind.css */

@import "/home/alex/.rbenv/versions/3.3.4/lib/ruby/gems/3.3.0/gems/simple_calendar-3.0.4/app/assets/stylesheets/simple_calendar.scss";

使用符号链接可以做得更好：

# config/initializers/gem_assets.rb

%w[simple_calendar].each do |name|
  system "mkdir -p app/assets/gems/#{name}"
  system "ln -snf `bundle show #{name}`/app/assets app/assets/gems/#{name}/assets"
end

# don't need this to be in asset paths again
Rails.application.config.after_initialize do
  Rails.configuration.assets.paths.delete Rails.root.join("app/assets/gems").to_s
end

这将从 simple_calendar 符号链接资产目录：

app/
└─ assets/
   └─ gems/
      └─ simple_calendar/
         └─ assets/ -> /home/alex/.rbenv/versions/3.3.4/lib/ruby/gems/3.3.0/gems/simple_calendar-3.0.4/app/assets/
            └─ stylesheets/
               └─ simple_calendar.scss

这比硬编码版本的绝对路径要好得多：

/* app/assets/application.tailwind.css */

@import "../gems/simple_calendar/assets/stylesheets/simple_calendar.scss";