css - 将 Maven SmartSprites 与 Sass 结合使用

Question

我正在使用 SmartSprites使用 SCSS。

SmartSprites 要求 Sprite Reference Directives必须看起来像这样:

background-image:url('image.png'); /** sprite-ref: mysprite; */

换句话说，我需要在我编译的 CSS 文件中的背景图像声明末尾添加注释，但是 none of the four output_styles of Sass允许这种情况发生。编译后:

:nested 或 :expanded

background-image:url('image.png');
/** sprite-ref: mysprite; */

:紧凑

.selector { background-image:url('image.png'); /** sprite-ref: mysprite; */ }

:压缩

.selector{background-image:url('image.png');}

在任何这些设置下，运行 Maven 以使用 SmartSprites 生成 Sprite 会报告构建失败。

解决方案必须......

• 遵守 SmartSprite 的格式要求(即在同一行的末尾有注释)
• 自动工作(格式化不需要手动操作)
• 不特定于任何一个文本编辑器
• 不放弃 SCSS(因为穴居人不这样做)

Answer 1

使用 maven-replacer-plugin在 Maven 构建过程中格式化样式表。

在 pom.xml 中，在 maven-replacer-plugin 的 <executions> 中插入以下内容:

<execution>
    <id>smartsprite-formatting</id>
    <phase>process-sources</phase>
    <goals>
        <goal>replace</goal>
    </goals>
    <configuration>
        <basedir>src/main/my-project</basedir>
        <includes>
            <include>**/*.css</include>
        </includes>
        <replacements>
            <replacement>
                <token>;\s*?\n.*/\*\*</token>
                <value>; /\*\*</value>
            </replacement>
        </replacements>
    </configuration>
</execution>

确保<basedir>中的文件路径是正确的 <phase>设置为 Maven Lifecycle 中的一个阶段在 SmartSprites 运行之前发生。 process-sources非常理想，因此可能不必更改。