Question

我在 application.css.scss 文件中跟随了mixin：

@mixin inputwithicon($iconname) {
  padding: 4px 4px 4px 20px;
  border:1px solid #ccc;
  text-indent: 0.30em;
  font-size:15px;
  font-weight:100;
  background: #FFFFFF url(assets/input/#{$iconname}.png) no-repeat;
  background-position: 2% center;
}

这个mixin在开发方面效果很好但是在预编译资产并在生产中运行后它停止工作（没有设置背景）。

我尝试使用image-url代替url，但它没有用。

Answer 1

background: #FFFFFF asset-url("assets/input/#{$iconname}.png") no-repeat;

-

在SASS中，您将使用asset-url; SCSS asset_url。

无论哪种方式，您都需要使用上面的帮助程序，以便在资产为fingerprinted到precompilation时，预处理程序引用正确的文件。

您遇到的问题是url只调用静态文件名。虽然它本身不是问题，但是当您部署应用程序并进行预编译时，您需要确保CSS引用正确的文件名，因此是帮助程序。

Answer 2

我建议您尝试其中一种情况。

1）将你的example.png放在app / assets / images /中，然后使用：

DataGrid

2）将你的example.png放在app / public / img /中，然后使用：

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
  <xs:element name="Message">
<xs:annotation>
  <xs:documentation> </xs:documentation>
</xs:annotation>
<xs:complexType>
  <xs:choice>
<xs:element name="root">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="table" maxOccurs="unbounded" minOccurs="1">
          <xs:complexType>
            <xs:sequence>
              <xs:element type="xs:string" name="column" maxOccurs="unbounded" minOccurs="1"/>
            </xs:sequence>
            <xs:attribute type="xs:string" name="name" use="required"/>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
     </xs:choice>`
</xs:complexType>
  </xs:element>
</xs:schema>

然后以这种方式指出其他css样式：

background-image:image-url("example.png");

希望它有所帮助！

在RAILS4生产环境中资产预编译后，背景图像不起作用

2 个答案: