在 Rails 中的所有样式表文件中携带 Sass 变量

Posted 2023-03-06

【中文标题】在 Rails 中的所有样式表文件中携带 Sass 变量

【英文标题】：Carry Sass variables across all stylesheet files in Rails

【发布时间】：2018-03-31 19:00:11

【问题描述】：

我有一个 site_settings.scss 文件，其中包含我的 Rails 应用程序的所有变量：

app/assets/stylesheets/site_settings.scss

$primary_color: #4285F4;
$dark_color: #333333; 
...

现在，如果我想在文件中使用这些变量，我需要在该文件中执行此操作：

import 'site_settings.scss'

我需要把它放在我想使用这些变量的每个文件的开头，否则 Rails 会给我Undefined variable: 错误。

我尝试将import 'site_settings.scss' 放在 application.scss 或 custom.scss 中，但它们都不起作用。

我还尝试在 aplication.scss 中使用 require 'site_settings' 并将 application.scss 重命名为 application.css.scss，如下所述：http://mildlyinternet.com/code/scss-variables-asset-pipeline.html ，但它仍然无法正常工作。

这是我的 application.scss：

/*
 *= require_self
 *= require font-awesome 
 */

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
@import "devise";
@import "site_settings";

那么，我该如何解决这个问题，这样我就不必每次都在每个文件中写入import 'site_settings.scss'？

【问题讨论】：

可以贴一下application.css的内容吗？

@PatrickO'Grady 我已将其添加到帖子中

您是否尝试过完全按照链接文章中的方式进行设置？你在哪里有 application.css，有一个 *= require file_name 语句，然后是 file_name.scss 和所有导入？

@PatrickO'Grady 是的，这就是我在这里发帖的原因，因为那没有用

@PatrickO'Grady 如果你想看文件，你可以去 github 上这里：github.com/ryzalyusoff/Quickrails

【参考方案1】：

您应该将所有将使用共享变量的文件重命名为以_ 开头。 这将在部分文件的上下文中呈现其他文件，这将使用@import 'site_settings' 中先前声明的变量。所以你会有site_settings.scss和quickrails/_general.scss，quickrails/_media_query.scss等等。

这些导入被认为是部分导入，这就是名称应该以下划线开头的原因，但是在导入时您可以不使用它。以下是有关此的材料：

Why put in front of the file name "_" or "_" in scss/css?

【参考方案2】：

将任何相关的= require 替换为@import 并删除任何= require，即使您认为自己已将其注释掉。