在 Rails 4 中为资产管道组织 css 的最佳实践是什么 [关闭]答案

【问题标题】：What are best practices organizing css for the Asset Pipeline in Rails 4 [closed]在 Rails 4 中为资产管道组织 css 的最佳实践是什么 [关闭]
【发布时间】：2014-03-03 03:35:57
【问题描述】：

在 Rails 4 中为资产管道组织 css 的最佳实践是什么？我希望能够在文件之间共享颜色变量，并希望控制 scss 文件的触发顺序。不使用清单语法，将 application.css 重命名为 application.css.scss 并改用导入会更好吗？

这就是我构建文件夹的方式

assets/stylesheet:
--application.css
--colors.css.scss
--fonts.css.scss
--frameworks.css.scss
--layout.css.scss
--nav.css.scss

application.css 文件如下所示：

*= require_self
*= require frameworks
*= require fonts
*= require colors
*= require layout
*= require_tree .

例如 fonts.css.scss 看起来像这样：

@import url(//fonts.googleapis.com/css?family=Raleway:400,700,800,900);
@import url(//fonts.googleapis.com/css?family=Merriweather:400,900,700);

【问题讨论】：

我找到了这篇博文，跟随着生成器在做什么，看起来很合法：mattboldt.com/organizing-css-and-sass-rails

标签： css ruby-on-rails ruby-on-rails-4 sass

【解决方案1】：

要使用您的自定义变量，@import 是解决方案。

我不在 SASS 项目中使用 Assets Pipeline 默认 require。相反，我使用@import。

//application.css.scss
@import "my_variables";
@import "bootstrap";
@import "others";

【讨论】：

我自己发现这是最好的解决方案。想知道为什么这不是 Rails 的默认方式吗？
@Andreas，我认为原因是，不是每个人都使用 SASS 和变量。还要导入每个文件会很乏味。

【解决方案2】：

如果您使用的是 SASS，您会发现 The Sass Way 中的 this blog post 很有帮助。

我也有this structure on Github 的例子。

类似的东西。如果您的项目很大，您可以使其更细化以满足您的需求。

+ modules
  - _base.scss
  - _mixins.scss
+ partials
  - _base.scss
  - _fonts.scss
+ vendor
  - bootstrap-custom.scss
- application.scss

【讨论】：