scss 文件中的 ENV 变量答案

【问题标题】：ENV variables in scss filescss 文件中的 ENV 变量
【发布时间】：2018-09-02 13:14:45
【问题描述】：

我想使用环境变量设置导航栏和 jumbotron pic 的颜色。

在我的 application.yml 文件中

NAVBAR_COLOR: "#FF7F50"    
JUMBOTRON_PIC: 'asset-url("somePic.png")'

我已将 custom.css.scss 更改为 custom.css.scss.erb 并添加了以下几行

.navbar-default {
    background-color: <%= ENV["NAVBAR_COLOR"] %> ; 
}

.jumbotron{
  background-image: <%= ENV["JUMBOTRON_PIC"] %> ;
}

但是，以上都不起作用。

知道为什么吗？

【问题讨论】：

我认为它有效，但 CSS 不会将字符串解释为颜色，因此 .navbar-default { background-color: '#FF7F50' } 不起作用。作为字符串传递的asset-url也不做任何事情。
我试过 NAVBAR_COLOR: red 还是不行。看起来 ENV 变量没有立即更新？
ENV 变量在服务器启动时评估一次。如果更改了 env 中的变量，则需要重新启动服务器。

标签： ruby-on-rails sass environment-variables

【解决方案1】：

.scss 文件不是 .erb 文件，因此 <%= .... %> 将不起作用。向它添加一个额外的 .erb 扩展名，并确保它是在服务器端预编译的，而不是在本地预编译的，并且在预编译时它只会工作一次。

我个人不会那样做。为此，我将在我的模板中呈现它：

#layouts/mylayout.html.erb

...
<head>
  <style>
    .navbar-default {
      background-color: <%= ENV["NAVBAR_COLOR"] %> ; 
    }
    .jumbotron{
      background-image: <%= ENV["JUMBOTRON_PIC"] %> ;
    }
  </style>
</head>
...

资产被预编译一次，然后交付快速响应，让它们依赖于环境变量不是一个好主意，如果您打算在预编译后更新该变量，那就更糟糕了。

【讨论】：

如何引用位于 app/assets/images 中的 somePic.png？ asset-url("somePic.png") 不起作用，我尝试了 url("app/assets/images/somePic.png") 也不起作用...
我真的不确定我是否理解用例。如果图像是您的 rails 项目的一部分，那么您必须检查编译时生成的路径（类似于 /assets/somePic-38...89.png）并将该路径设置为变量。并且做background-image: url(<%= ENV["JUMBOTRON-PIC"] %> 但为什么不这样做而不使用en ENV 并且只使用助手呢？如果图像仅在服务器上而不是 Rails 代码的一部分，那么您必须在每次部署时将其放入 /public 并为此设置 url。真的，我建议你改进提问的方式，will not work 可能意味着很多事情。
不工作意味着它不加载图像:)。我知道我可以只使用帮助器（这是我到目前为止所做的），但我想使用 ENV 变量来做这件事是有原因的。

【解决方案2】：

关于 ENV 变量的更新，您必须按照其中一个 cmets 的指示重新启动服务器。

为了正确加载背景图片，我发现以下工作：

#config/application.yml
JUMBOTRON_PIC: "/assets/somePic.png"
NAVBAR_COLOR: "#1ac2ff"

#layouts/mylayout.html.erb
 <style>          
   .jumbotron{
        background-image:  url( "<%= ENV["JUMBOTRON_PIC"] %>" );
      }      

   .navbar-default {
        background-color: <%= ENV["NAVBAR_COLOR"] %> ; 
  }  
 </style>

【讨论】：