Question

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

在我的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"] %> ;
}

但是，以上两种方法均无效。

知道为什么吗？

Answer 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>
...

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

Answer 2

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

要使背景图片正确加载，我发现可以使用以下方法：

#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>

scss文件中的ENV变量

2 个答案: