如何在Rails 3.1中管理CSS样式表资产?

ruby-on-rails CSS

2020-03-23

我只是在学习Rails 3.1中的新资产管道。我遇到的一个特殊问题是Sprockets只是将找到的所有CSS样式表混搭为一个庞大的样式表的方式。我知道为什么这比手动合并样式表和最小化生产更有利。但是我希望能够选择性地级联样式表,而不是将所有规则都混在一起。例如,我想要:

master.css

由Rails应用程序中的所有页面加载,但是我想要

admin.css仅由admin节/命名空间中的页面/视图加载。

我该如何利用Rails 3.1组合样式表并将其最小化的绝佳方式进行生产,同时又具有以前的灵活性,即只能在每个布局中加载某些样式表组合?

还是应该通过将一个类添加到布局中的body标签来完成-

正文class =“ admin”

然后根据需要定位样式规则。使用SASS范围选择器可能是一个合理的解决方案。

第2927篇《如何在Rails 3.1中管理CSS样式表资产?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
西里Stafan小哥 2020.03.23

我用类似的东西

application.html.erb“>

show.html.erb

content_for:body_id结束page_specific_body_id

2020.03.23

到目前为止,我一直使用的方法是拥有两个单独的文件夹a /和u /,其中a /用于管理员视图,而u /用于用户视图。然后在布局中,指向资产/u/application.css(js)对应的application.css。每次都必须移动自动生成的文件有些麻烦,但是比清单中需要单独地每个文件要少得多。

阿飞 2020.03.23

我的网站上发布了有关此内容的文章: 利用Rails 3.1,SCSS和资产管道来区分您的样式表

并检查出另一个问题的答案:使用Rails 3.1资产管道有条件地使用某些CSS

希望这可以帮助。

最好的问候,拉瑟

Gil 2020.03.23

@nathanvda:当然...

我们使用多个布局文件。因此,在我们的app / views / layouts中,我们不仅拥有application.html.haml(我们使用HAML),而且实际上忽略了应用程序布局并使用了3种自定义布局:

admin.html.haml(仅管理员部分视图)

registered.html.haml(仅在用户视图中注册/签名)

unregistered.html.haml(仅在用户视图中未注册/未签名)

因此,在我的admin.html.haml文件的顶部,我将获得样式表链接标记,该标记指向单独的admin.scss(我们使用SCSS)清单。该清单将仅为admin部分加载任何必要的子样式表。这使我们可以只为admin部分指定规则,同时也可以使用常见样式。例如,我们在整个站点中都使用jquery-ui,因此与jquery-ui关联的样式位于它们自己的样式表中,并将它们包括在所有3个CSS清单文件的清单中。

该解决方案没有为您提供可缓存的CSS文件,但最终为您提供了3个CSS文件,每个文件均可缓存。这样可以在性能和组织CSS规则的灵活性之间进行权衡,因此我们不必担心CSS规则冲突。

2020.03.23

这就是我解决样式问题的方法:(对不起,Haml)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

这样,我将使用以下命令启动所有页面特定的.css.sass文件:

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

这样,您可以轻松避免任何冲突。

希望这对一些人有所帮助。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android