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。但是，当我浏览开源项目的代码库时。它似乎没有这行代码。预编译似乎就像魔术一样。

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

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

编辑：进一步解释案例

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

/*  * 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评论。

来自rails-sass文档：

Sprockets提供了一些放在注释中的指令调用require，require_tree和require_self。不要使用它们你的SASS / SCSS文件。它们很原始，效果不好用Sass文件。相反，使用Sass的原生@import指令 sass-rails已经过定制，可以与您的惯例相集成 Rails项目。

然后，如果你有任何其他需要预编译的.scss，你必须使用Rails.Application.config.assets.precompile指令明确地添加它们，然后链轮铁路将完成其余的工作！

要回答原始问题，开源项目不需要指定要预编译的资产的原因是因为它们在config / environment / production.rb文件中使用config.assets.compile = true。这显然是一个非常糟糕的做法，我不建议你在生产环境中将此指令切换到true ...你最终会得到一个代码很少的慢速代码，而且页面加载速度很慢

如何在rails中组织SCSS？

1 个答案: