application.css.scss 中的 Require 语句

Posted 2023-03-07

【中文标题】application.css.scss 中的 Require 语句

【英文标题】：Require statement in application.css.scss

【发布时间】：2014-11-28 01:15:19

【问题描述】：

我想使用 lightbox gem，例如 fancybox 或 color box。两个 gem 都要求在 application.css 中添加这一行

 *= require colorbox-rails

这就是问题所在。我只有 application.css.scss 文件。我所有的 css 文件都是 scss 文件。我在 application.css.scss 中有 import 语句，但没有 *=require 语句。添加上面的行会导致错误：

“*”后的 CSS 无效：预期为“”，为“=require colorb...”

这是完整的 application.css.scss

@import "bootstrap";
@import "welcome";
@import "sessions";
@import "users";


*= require colorbox-rails

【参考方案1】：

application.css.scss 或 application.css 有点相同。只需将您的 application.css 重命名为 application.css.scss。

至于添加该行，它需要在评论中位于顶部。像这样：

/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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_self
 *= require colorbox-rails
 */

@import "bootstrap";
@import "welcome";
@import "sessions";
@import "users";

【讨论】：

不应该在 sass/scss 文件中使用 *= require_anything 吗？

正如@masaaki 所说，混合/匹配需求/导入是一种不好的做法吗？

@masaaki 那你为什么不给出一个替代答案。我是菜鸟，但因为你的 cmets，我现在不知道该怎么办。

@orange14 上面的解决方案可以正常工作。不要被推迟。有些人可能认为将所有这些@imports 拉到底部的一个单独的文件中，例如my_files.css.scss，然后添加一个额外的行*= require my_files，这样会更整洁。 @import 行是 SCSS，*= require 行是特定于 rails 的东西，而不是 SCSS。因此，将它们分开可能会更整洁，但这两种方式都没有太大关系。我懒得把它们分开。

感谢@joshua.paling，我的项目中没有 application.css 文件，但有一个 application.scss。在每个在线教程中，他们都告诉我添加 *= 要求 my_files。所以我在 anapplication.scss 中添加所有内容。不知道这是否是要走的路，因为我是菜鸟，但感谢您的及时回复。您的回复很有帮助。

【参考方案2】：

明确地说，我在使用样式表目录中的单个 font.scss 文件（使用 sass 和 haml 的 Rails 应用程序）声明不同字体的字体文件时遇到了这个问题。我关注了相关问题（如this article on SO）并尝试了许多相关解决方案，如从字体ttf文件名中删除'-'、更改font.scss文件中的url声明等。

@joshua.paling 的解决方案对我有用...

将 font.scss 文件名更改为 font.css

在 application.scss 文件中使用以下声明样式：

/* ...    
*= require_self    
*= require fonts    
*/
# @import other files here excluding the font.css file

在此配置下，以下字体声明仍然有效

 @font-face 
   font-family: PT Serif;
   src: url('PT_SerifWebRegular.ttf') format("truetype");
 

【讨论】：

如果其他答案对您有用，则适当的行为是支持他们的答案，而不是发布表明该答案有效的新答案。

我做了，但这是相关的，值得发布。拒绝投票的错误形式试图将类似的错误与多种原因联系起来，并节省我花了三个小时解决问题的时间。明确地说，我没有通过寻找与字体相关的问题或通过寻找 SASS / CSS 问题来得到这个答案。 SO 不仅仅是关于答案，而是关于解决方案。

不，这是关于解决被问到的问题。没有人问过字体，所以看起来你在发布“谢谢 joshua.paling！”的混合。完全回答另一个问题。仅仅因为您借助另一个答案解决了问题并不意味着您应该去发布不属于它们的随机答案。