如何在 Rails 中组织 SCSS？

Question

我刚刚启动了一个新的 Rails 项目，并试图从一个开源的 Rails 项目中参考他们如何构建他们的应用程序。

Link to the open sourced project

我注意到他们有多种布局，例如管理员，应用程序，家庭..等。每个都可以通过stylesheet_link_tag 加载到不同的样式表中。

例如在focus_home.html.erb:

<!-- Load styles -->
<%= stylesheet_link_tag 'focus_home' %>
<%= stylesheet_link_tag 'app/components/modal' %>

在他们的app/assets/stylesheets 目录中，他们有focus_home.scss

我尝试遵循他们的架构，我有多个 css 文件，并以不同的布局调用不同的样式表。

我创建了我的home.scss 供home.html.slim 使用

当我启动我的 Rails 服务器并尝试加载 home 页面时，出现以下错误

Asset filtered out and will not be served: add
`Rails.application.config.assets.precompile += %w( home.css )` to
`config/initializers/assets.rb` and restart your server

基本上它要求我告诉 Rails 预编译 home.scss。但是，当我浏览开源项目的代码库时。好像没有这行代码。预编译似乎就像魔术一样发生。

所以我想知道我错过了什么？

==============

编辑：进一步解释案例

在他们的项目中，他们没有像普通的 rails 项目一样有一个 application.css 文件。

/*  * This is a manifest file that'll be compiled into application.css, which will include all the files  * listed below.  * 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,  * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.  *  * You're free to add application-wide styles to this file and they'll appear at the bottom of the  * compiled file so the styles you add here take precedence over styles defined in any styles  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new  * file per style scope.  *  *= require_tree .  *= require_self  */

相反，在他们的application.scss 中，它就像

@charset "utf-8";

@import "vars/base";
@import "constants";

// Libraries
@import 'bootstrap';

@import 'app/mixins/*';

@import 'basscss';

@import '_deprecated/basspluss';
@import '_deprecated/utility';
@import '_deprecated/nocss_vars';
@import '_deprecated/nocss';
@import '_deprecated/nocss_mq';

@import "app/main";

@import "base/*";
@import "utilities/*";
@import "app/components/*";
@import "components/*";
@import "app/slop";

@import 'libs/owl.carousel';
@import 'libs/owl.transitions';
@import 'libs/owl.theme';

@import 'c3/c3'

所以我想知道他们实际上是如何进行预编译的？

Answer 1

您不需要在 application.scss 和 must only use @import CSS rules 中使用 Sprockets cmets。

来自 rails-sass 文档：

Sprockets 提供了一些放置在 cmets 内部的指令 称为 require、require_tree 和 require_self。不要使用它们 您的 SASS/SCSS 文件。它们非常原始，不能很好地工作 使用 Sass 文件。相反，使用 Sass 的原生 @import 指令 sass-rails 已定制为与您的约定集成 Rails 项目。

然后，如果您有任何其他需要预编译的 .scss，则必须使用 Rails.Application.config.assets.precompile 指令显式添加它们，然后 sprockets railtie 将完成剩下的工作！

为了回答您最初的问题，开源项目不需要指定资产进行预编译的原因是因为它们在 config/environment/production.rb 文件中使用了config.assets.compile = true。这显然是一种非常糟糕的做法，我不建议您在生产环境中将此指令切换为true...您最终会遇到发出大量请求的缓慢代码并且页面加载缓慢。