The sourcemap generated by gulp is not functioning as expected

Question

The sourcemap generated by gulp is not functioning as expected

Custom Styling

custom-styles.less

@import "theme.less";
@import "layout.less";

theme.less

body { background:blue; }

layout.less

body { font-family: Arial, sans-serif; }

Build Process - Gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/custom-styles.less')
  .pipe(less())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

Issue: After compiling, styles.css + styles.map.css are generated but the map file fails to load on the webpage. In addition, when inspecting the page, only styles.css are visible.

Useful Tools
gulp less - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps

Seeking assistance to resolve this frustrating issue. Any help would be greatly appreciated. Thank you.

javascript css gulp

Answer 1

Answer №1

Make sure you are not "piping" to less() without first initializing the sourcemap plugin correctly. Here is the correct way to do it:

const gulp = require('gulp');
const less = require('gulp-less');
const sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(less()) // Ensure this line comes after init and before write
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

Answer 2

Make sure you are not "piping" to less() without first initializing the sourcemap plugin correctly. Here is the correct way to do it:

const gulp = require('gulp');
const less = require('gulp-less');
const sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/assets/less/styles.less')
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(less()) // Ensure this line comes after init and before write
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

Answer 3

Answer №2

Here is the resource I meant to share - https://github.com/radist2s/gulp-less-sourcemap

Answer 4

Here is the resource I meant to share - https://github.com/radist2s/gulp-less-sourcemap

Answer 5

Answer №3

After spending some time troubleshooting, I finally figured out the solution for loading the map in my browser.

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init()) // init the source map
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(prefix('last 2 versions'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

All I had to do was add loadMaps: true to my sourcemaps.init() function and everything started working perfectly again.

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init({loadMaps: true})) // init the source map 
            ...
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

Answer 6

After spending some time troubleshooting, I finally figured out the solution for loading the map in my browser.

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init()) // init the source map
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(prefix('last 2 versions'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

All I had to do was add loadMaps: true to my sourcemaps.init() function and everything started working perfectly again.

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init({loadMaps: true})) // init the source map 
            ...
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

The sourcemap generated by gulp is not functioning as expected

Answer №1

Answer №2

Answer №3

Similar questions

Apply geometric principles to the physical world

Obtaining the blog slug dynamically upon clicking with ReactJS

Access the element generated by Bootstrap using JavaScript

What is the method for accessing State in a Class component using a concatenated String?

Shift every ng-repeat child element and display the updated outcome

Seeking a solution for resolving the problem with HTML1402 when using jquery URL in Internet Explorer?

What is the best way to eliminate the ng-hide class dynamically in AngularJS?

Omitting "a" elements with a designated ancestor from a jQuery scroll operation

The CSS background image in PNG format displays a white line at the beginning of the transparency

What is the best method to send the HTML button ID to a Python file through Django?

What is the best method for sending the primary key value to DynamoDB?

Asynchronous execution of a MongoDB query using a loop iteration

javascript function not being invoked

Trouble aligning items in a fieldset with Bootstrap

The internal browser scrollbar in IE 11 is proving to be impossible to remove, even with the use of simplebar

Ways to update the hidden field's value within a foreach loop when the change event occurs?

Modify the selected toggle buttons' color by utilizing the MUI ThemeProvider

Track the number of HTML5 drag and drop operations by adding a counter to your HTML form

At smaller desktop resolutions, the 1px border thickness for tables may fluctuate

How can you style a two-item list in Material-UI React to display the items side by side?