Встраивать CSS-изображения как Base64 с Gulp / SCSS и @import - PullRequest
Новая
       8

Встраивать CSS-изображения как Base64 с Gulp / SCSS и @import

0 голосов
/ 12 сентября 2018

У меня есть несколько файлов SCSS, которые являются частью модульной темы.Таким образом, они должны быть включены с помощью @import.Они также содержат некоторые фоновые изображения CSS, которые должны быть встроены как base64.Короче говоря, проблема в том, что ни один плагин gulp base64, по-видимому, не доступен для разрешения правильных путей, если изображение backgrund находится во вложенном файле, который был добавлен с использованием @import.

Структура файла

code_2018-09-12_16-19-12

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"
}

1 Ответ

0 голосов
/ 15 сентября 2018

Это нормально, что кодировка base64 не работает должным образом.Путь спрайта в файле sub.scss неправильный, необходимо, чтобы путь был sub/sprite/9_2018_ohne.jpg. 

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

CSS отображается из файла test.scss и изменяетсяиерархия путей.

...