导入的 css 个文件未编译成 application.css 个文件

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 文件导入的文件发出请求，而不是在文件下编译它们。

我也在用sassrailsgem。关于 rails 资产管道，我有什么不明白的地方吗？

Answer 1

混淆来自于 SASS 以某种方式覆盖了 @import 指令。

在您的情况下，使用纯 CSS' @import directive，因为您正在传递 url(..，正如您注意到的那样，它对每个文件发出 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 个文件

imported css files are not compiled into application.css file

ruby-on-rails

asset-pipeline