落花踏尽游何处,笑入胡姬酒肆中。这篇文章主要讲述我应该如何在stylesheet_link_tag之前加载application.scss? - Rails5中的最佳实践是什么?相关的知识,希望能为你提供帮助。
我正在使用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之前加载application.scss( - Rails5中的最佳实践是什么?)】但是如果你使用
stylesheet_link_tag
两次,浏览器将发出2个加载样式表文件的请求。这不是最佳做法。你应该将mypage
包装在一个容器中,如下所示:## mypage.html.erb
<
div id="mypage-container">
...
<
/div>
// application.scss
@import 'variable';
@import 'mypage';
...// mypage.scss
#mypage-container {
...
}
推荐阅读
- Android(如何将参数传递给AsyncTask的onPreExecute()())
- 为什么静态final int在android标准类中用于避免枚举()
- 无法显示Visual Studio 2008 Tools for Applications编辑器 - MSBuildToolsPath
- 什么是Android提示的颜色代码()
- 在Android Textview中为不同的超链接使用不同的颜色
- 如何使用onRequestPermissionsResult处理React Native Android模块中的权限()
- 在RecyclerView-AndroidX中的项目之间添加不同的布局
- Android计时器更新文本视图(UI)
- 在Android Studio中添加延迟计时器