时间戳

首页 > 解决方案 > 如何在 Sprockets 4 中存根资产而不破坏一切？

css - 如何在 Sprockets 4 中存根资产而不破坏一切？

问题描述

我有几个不同的样式表，它们应该是互斥的，我们称它们为 light.css.scss 和 dark.css.scss。到目前为止，我的资产管道包括：

在 app/assets/stylesheets 文件夹中创建文件：

application.css
light.css.scss
dark.css.scss

将它们包含在我的初始化程序/assets.rb 中：

Rails.application.config.assets.precompile += %w( light.css.scss )
Rails.application.config.assets.precompile += %w( dark.css.scss )

在我的 application.css 文件中将它们存根：

/*
 *= require_self
 *= require_tree .
 *= stub dark.css.scss
 *= stub light.css.scss
 */

然后在需要时手动要求它们：

<% if subdomain == "light" %>
  <%= stylesheet_link_tag "light" %>
<% else %>
  <%= stylesheet_link_tag "dark" %>
<% end %>

这很好用，但后来我将 Sprockets gem 升级到 4.0，一切都坏了。事实证明我需要一个 assets/config/manifest.js 文件，但实际上我可以在该文件上找到的唯一信息是this，那个人说他也找不到任何信息，并且他的应用程序运行良好一个空白的。使用空白文件，我收到如下错误：

#<ActionView::Template::Error: Asset `favicons/dark.png` was not declared to be precompiled in production.

暗示清单文件负责预编译所有资产。但是当我将样板代码输入其中时：

#manifest.js
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

我明白了：

#<ActionView::Template::Error: couldn't find file 'dark.css.scss' with type 'text/css'

无论我做什么，我都会收到各种类似的未找到的文件错误。当我从 application.css 中取消样式表文件时，我没有收到错误，但是这些样式混合在一起，这是一个设计噩梦。我收集到 application.css 正在“隐藏”文件，然后 manifest.js 在找不到它们时会感到困惑，但我不知道该怎么做。我尝试将它们从 application.css 中取消存根并在 manifest.js 中存根，但这也不起作用。真正奇怪的是我找不到任何关于 manifest.js 文件应该如何工作的信息。

任何人都知道我如何保持我的样式表文件存根而不破坏我的整个管道？

标签： cssruby-on-railsasset-pipelinesprocketsprecompile

解决方案

答案实际上很简单，问题出require_tree .在我的 application.css 中。我只是删除了其中的所有内容，并在 manifest.js 中一一添加了我的样式表，使用 .css 而不是 .css.scss，如下所示：

//= link dark.css
//= link light.css

然后像以前一样根据需要包含文件。现在它们都是预编译的，但不会相互干扰。

推荐阅读