gulp-css-base64 icon indicating copy to clipboard operation
gulp-css-base64 copied to clipboard

No Base64 Conversation when scss files got included

Open weber-d opened this issue 5 years ago • 0 comments

Base64 conversation doesn't work if scss file got included in another file.

File structure

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));
});

Generated css result:

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

If I place the background directive directly in test.scss it works well as expected:

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

Installed Packages:

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

weber-d avatar Sep 12 '18 14:09 weber-d