gulp.spritesmith 抑制生成的 css 文件中的 "icon-"前缀

Question

我正在使用 gulp.spritesmith 自动生成 Sprite 图像和 css。除了生成的 css 是 haivng "icon-"前缀之外，一切都很好。我不想添加这个前缀，因为我有现有的 HTML 标记，我不想更改标记。
以下是我的 gulp 任务。

'use strict';
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');


gulp.task('sprite', function () {    

    var spriteData =
            gulp.src('./sprite/*.*') // source path of the sprite images
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: 'sprite.css'
            }));

    spriteData.img.pipe(gulp.dest("./css")); // output path for the sprite
    spriteData.css.pipe(gulp.dest("./css")); // output path for the CSS
});

以下是我生成的css。

.icon-icon1 {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 120px;
  height: 120px;
}
.icon-icon2 {
  background-image: url(sprite.png);
  background-position: -120px 0px;
  width: 120px;
  height: 120px;
}

请帮助抑制“icon-”。

Answer 1

您也可以使用 cssSelector图书馆的。

cssOpts: {
  cssSelector: function (sprite) {
    return '.' + sprite.name;
  }
}