Question

我有一个style.scss文件，其中我导入了一堆其他文件，例如

@import url(asset-path('bootstrap/css/bootstrap.min.scss'));
@import url(asset-path('ionicons/css/ionicons.min.scss'));
@import url(asset-path('slick-carousel/slick/slick.scss'));
@import url(asset-path('slick-carousel/slick/slick-theme.scss'));
@import url(asset-path('owl-carousel/assets/owl.carousel.min.scss'));
@import url(asset-path('owl-carousel/assets/owl.theme.default.scss'));
@import url(asset-path('owl-carousel/assets/carousel.min.scss'));
@import url(asset-path('bxslider/jquery.bxslider.min.scss'));
@import url(asset-path('magicsuggest/magicsuggest-min.scss'));

这些文件位于vendor /目录下。

在生产模式下，查看“网络”选项卡，服务器会向scss文件中的每个导入文件发出请求，而不是将它们编译在文件中。

我也在使用sass rails gem。关于Rails资产管道，我有什么不了解的地方吗？

Answer 1

混淆是由于SASS在某种程度上覆盖了@import指令。

在您的情况下，由于传递的是url(..，因此使用的是纯CSS' @import directive，正如您注意到的那样，每个文件都会进行HTTP请求。

为了使用@import的SASS版本（它将导入并组合内容），您需要在文件中使用引号：

...  
@import 'slick-carousel/slick/slick.scss';
...

这是有关SASS' @import

的详细说明

Answer 2

您的主CSS文件是通过app/assets/stylesheets/application.css文件完成的。

例如：

*= require navbars.css.scss
*= require footer.css.scss
*= require cookiewarning.css.scss
*= require_self

上面的代码将在application.css主文件中包括所有提到的css文件，无论它们位于app/assets app/lib还是app\vendor中。

您的主文件在views/layouts/application.html.erb中被调用

<%= stylesheet_link_tag 'application', media: 'all' %>  
<%= yield(:headcss) %>
<%= stylesheet_link_tag params[:controller], media: 'all' %>

如您所见，我为当前控制器有一个单独的文件。还有一个yield标签，用于我想在需要时添加的其他CSS。

还有关于文件的注意事项：SASS是CSS的预处理器。最好将文件命名为whatever.css.scss，而不是whatever.scss。由于以下原因，我在使SASS助手正常工作时遇到了一些问题：Sass rails seems to generate a different logical path than in manifest

导入的CSS文件未编译为application.css文件

2 个答案: