Rails 3.1:如何包含 oocss CSS 框架

发布于 2024-11-10 08:47:43 字数 3093 浏览 1 评论 0原文

我正在尝试将 OOCSS 框架加载到我的新 Rails 3.1 应用程序中。到目前为止,我已将项目克隆到 /vendor/assists/stysheets/oocss 中,并尝试从 /app/assists/stylesheets/application.css 中提取项目,

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require ../../../vendor/assets/stylesheets/oocss/all
 *= require_self
 *= require_tree .
*/

但是这不能正常工作,因为编译的 css 文件只包含应该加载其他文件的两行。

@import url("core/core.css");
@import url("plugins/plugins.css");
/*
 * FIXME: Introduce SCSS & Sprockets
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/

关于如何实现这一目标有什么想法吗?

更新: 我通过按正确的顺序手动加载 CSS 文件做了一个肮脏的解决方法。

app/assets/stylesheets/application.cssvendor

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require ../../../vendor/assets/stylesheets/oocss
 *= require_self
 *= require_tree .
*/

/assets/stylesheets/oocss.css.scss

/*
 * Core 
 *= require ../../../vendor/assets/stylesheets/oocss/core/libraries.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/template/template.css
 * require ../../../vendor/assets/stylesheets/oocss/core/template/template_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/grid/grids.css
 * require ../../../vendor/assets/stylesheets/oocss/core/grid/grids_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/module/mod.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/module/mod_skins.css
 * require ../../../vendor/assets/stylesheets/oocss/core/module/mod_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/media/media.css
 * require ../../../vendor/assets/stylesheets/oocss/core/media/media_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/content.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/heading/heading.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/spacing/space.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/table/table.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/table/table_skins.css
 * require ../../../vendor/assets/stylesheets/oocss/core/table/table_debug.css

 * Plugins
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/breadcrumb/breadcrumb.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/tabs/tabs.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk_skins.css
*/

致以诚挚的问候。 阿斯比约恩·莫雷尔

I am trying to load the OOCSS framework into my new Rails 3.1 application. So far I have clone the project into /vendor/assists/stysheets/oocss, and tried to pull in the project from /app/assists/stylesheets/application.css

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require ../../../vendor/assets/stylesheets/oocss/all
 *= require_self
 *= require_tree .
*/

However this does not work properbly, as the compiled css file just contains the two lines that should load the other files.

@import url("core/core.css");
@import url("plugins/plugins.css");
/*
 * FIXME: Introduce SCSS & Sprockets
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/
/* 
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/

Any ideas on how to pull this off?

UPDATE:
I did a dirty workaround by manually loading the CSS files in the correct order.

app/assets/stylesheets/application.css

/*
 * FIXME: Introduce SCSS & Sprockets
 *= require ../../../vendor/assets/stylesheets/oocss
 *= require_self
 *= require_tree .
*/

vendor/assets/stylesheets/oocss.css.scss

/*
 * Core 
 *= require ../../../vendor/assets/stylesheets/oocss/core/libraries.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/template/template.css
 * require ../../../vendor/assets/stylesheets/oocss/core/template/template_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/grid/grids.css
 * require ../../../vendor/assets/stylesheets/oocss/core/grid/grids_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/module/mod.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/module/mod_skins.css
 * require ../../../vendor/assets/stylesheets/oocss/core/module/mod_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/media/media.css
 * require ../../../vendor/assets/stylesheets/oocss/core/media/media_debug.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/content.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/heading/heading.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/spacing/space.css

 *= require ../../../vendor/assets/stylesheets/oocss/core/table/table.css
 *= require ../../../vendor/assets/stylesheets/oocss/core/table/table_skins.css
 * require ../../../vendor/assets/stylesheets/oocss/core/table/table_debug.css

 * Plugins
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/breadcrumb/breadcrumb.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/tabs/tabs.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk.css
 *= require ../../../vendor/assets/stylesheets/oocss/plugins/talk/talk_skins.css
*/

Best regards.
Asbjørn Morell

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文