使用Gulp/SCSS和@ Base64将CSS图像嵌入为导入

Question

我有一些SCSS文件，是模块化主题的一部分。因此，需要使用@import将它们包含在内。它们还包含一些css背景图片，这些图片应该作为base64嵌入。简而言之，问题在于，如果背景图像位于使用@import包含的子文件中，则任何gulp base64插件似乎都无法解析正确的路径。

文件结构

​

​

sub/sub.scss

.my-image { background: url(sprite/9_2018_ohne.jpg); }

test.scss

@import "sub/sub";

gulpfile

/// <binding ProjectOpened='sass, sass-watch' />
const gulp = require("gulp"),
  rename = require("gulp-rename"),
  sass = require("gulp-sass"),
  cleanCSS = require("gulp-clean-css"),
  sourcemaps = require("gulp-sourcemaps"),
  noop = require("gulp-noop"),
  header = require("gulp-header"),
  cssBase64 = require("gulp-css-base64");

const srcFolder = "src";
const productionBuild = false;

let bundle = {
  sassFiles: [`src/test.scss`],
  output: {
    file: "main.css",
    folder: "."
  }
};
let cleanCssOptions = {
  compatibility: "ie11",
  debug: true,
  level: 2
};

gulp.task("css", () => {
  let headerNotice = `/* test*/`;

  return gulp
    .src(bundle.sassFiles)
    .pipe(productionBuild ? noop() : sourcemaps.init())
    .pipe(sass())
    .pipe(
      cssBase64({
        //baseDir: "img",
        maxWeightResource: 100000000000
      })
    )
    .pipe(
      productionBuild ? cleanCSS(cleanCssOptions) : noop()
    )

    .pipe(rename(bundle.output.file))
    .pipe(productionBuild ? sourcemaps.write() : noop())
    .pipe(header(headerNotice))
    .pipe(gulp.dest(bundle.output.folder));
});

生成的css结果：

css .my-image { background: url(sprite/9_2018_ohne.jpg); }

如果我将后台指令直接放在test.scss中，它会像预期的那样正常工作：

css .my-image { background: url(data:image/jpeg;base64, ...);

已安装的软件包：

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.9.4",
    "gulp-header": "^2.0.5",
    "gulp-noop": "^1.0.0",
    "gulp-rename": "^1.3.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4"
},
"devDependencies": {
    "gulp-css-base64": "^1.3.4"
}

Answer 1

base64编码不能正常工作是很正常的。sub.scss文件中sub/sprite/9_2018_ohne.jpg的路径不正确，路径必须是sprite。

.my-image {
    background: url(sub/sprite/9_2018_ohne.jpg);
}

CSS是从文件test.scss呈现的，它更改了路径的层次结构。