gulp-css-base64
gulp-css-base64 copied to clipboard
No Base64 Conversation when scss files got included
Base64 conversation doesn't work if scss file got included in another file.
File structure
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"
}```