我应该如何在stylesheet_link_tag之前加载application.scss？ - Rails5中的最佳实践是什么？

Posted 2021-05-04

我正在使用variable.scss来控制我的scss文件中的所有变量。

在这种情况下，当我想在mypage.html.erb中使用'mypage.scss'并想在variables.scss中使用mypage.scss的变量时，有什么最好的方法来实现这一点？

在<%= stylesheet_link_tag 'mypage' %>使用mypage.html.erb会导致错误，因为mypage.scss无法从variable.scss获取变量。应该在variable.scss之前召集mypage.scss。

现在的情况

application.scss

# application.scss
@import 'variable'
@import 'components'
@import 'layouts'
...

mypage.html.erb

<%= stylesheet_link_tag 'mypage' %> 
# error!! because I'm using many $variable in mypage.scss which defined in variable.scss.

简而言之，我应该如何在stylesheet_link_tag之前加载application.scss？

答案

要做到这一点，你必须像这样使用:content_for：

## mypage.html.erb
<%= content_for :stylesheet do %>
  <%= stylesheet_link_tag 'mypage' %>
<% end %>

## application.html.erb
# ...
<%= stylesheet_link_tag 'application' %>
<% yield(:stylesheet) if content_for?(:stylesheet) %>
# ....

---

但是如果你使用stylesheet_link_tag两次，浏览器将发出2个加载样式表文件的请求。这不是最佳做法。你应该将mypage包装在一个容器中，如下所示：

## mypage.html.erb
<div id="mypage-container">
  ...
</div>

// application.scss
@import 'variable';
@import 'mypage';
...

// mypage.scss
#mypage-container {
  ...
}