Rails rails7 之后怎么加载页面特定的 css?

willx · 2024年10月14日 · 最后由 Rei 回复于 2024年10月14日 · 64 次阅读

我记得好几年以前创建页面会自动创建一个对应的 css 文件,现在的版本怎么没有了😭

tailwind 确实很好用,但有时候 CSS 非常复杂,tailwind 涵盖不了,写全局又会导致 css 名很长去避免冲突

Rails 7 可以选择 sprockets 和 propshaft,Rails 8 默认是 propshaft。

对于 sprockets,确认 manifest.js 里面有:

//= link_directory ../stylesheets .css

那么 app/assets/stylesheets 里面的每个 .css 文件都会单独编译和提供。

例如添加一个 app/assets/stylesheets/page.css,那么就可以使用 page.css

在布局 app/views/layouts/application.html.erb 里面的 head 预留位置:

<head>
  ...
  <%= yield :head %>
</head>

然后在对应页面:

<% content_for :head do %>
  <%= stylesheet_link_tag "page" %>
<% end %>

对于 propshaft,默认 app/assets/stylesheets 目录内的文件都会单独提供,从上面布局部分开始做就行。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号