0

So I have updated the default_head_blocks.xml file with my css file like so and the theme loads the CSS.

<css src="css/master.css" />

This is my gulpfile.

const gulp = require("gulp");
const plumber = require("gulp-plumber");
const livereload = require("gulp-livereload");
const less = require("gulp-less");
const wait = require("gulp-wait");
const sourcemaps = require("gulp-sourcemaps");

gulp.task("less", function() {
  return gulp
    .src([
      "./app/design/frontend/Sm/market/web/css/master.less",
      "./app/design/frontend/Sm/market/web/css/ytextend.less",
      "./app/design/frontend/Sm/market/web/css/yttheme.less"
    ])
    .pipe(plumber())
    .pipe(less())
    .pipe( sourcemaps.write() )
    .pipe(gulp.dest("./pub/static/frontend/Sm/market/en_GB/css"))
    .pipe(wait(2000))
    .pipe(livereload());
});
// Watch Files For Changes and livereload
gulp.task("watch", function() {
  livereload.listen();
  // gulp.watch("./app/design/frontend/Sm/market/web/css/*.less", ["less"]);
  gulp.watch("./app/design/frontend/Sm/market/web/css/**/*.less", ["less"]);
  // gulp.watch("./pub/static/frontend/Sm/market/en_GB/css/market.css", ["reload"]);
});

gulp.task("default", ["less", "watch"]);

However, I can't seem to get sourcemaps working correctly.

This is what shows on the dev tools for Chrome. When it should be showing the .less file or at least master.css - When I click that it does take me to the href for the stylesheet in pub/static folder. enter image description here

0

If anyone comes across this problem. Had to write the sourcesmaps to a folder - ./maps - inline wasn't working. Also, ensure there are no errors in your LESS files.

gulp.task("less", function() {
  return gulp
    .src([
      "./app/design/frontend/Sm/market/web/css/master.less",
      "./app/design/frontend/Sm/market/web/css/ytextend.less",
      "./app/design/frontend/Sm/market/web/css/yttheme.less"
    ])
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(less())
    .pipe( sourcemaps.write('./maps') )
    .pipe(gulp.dest("./pub/static/frontend/Sm/market/en_GB/css"))
    .pipe(wait(2000))
    .pipe(livereload());
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.