i have this set up as follows to generate .min css with sourcemaps to less files.
gulp.task("stylesheets", function () { return gulp.src('web/src/less/*.less') .pipe(sourcemaps.init({largeFile: true})) .pipe(sourcemaps.identityMap()) .pipe(less()) .pipe(postcss(plugins)) .pipe(stripCssComments({preserve: true})) .pipe(cleanCSS({compatibility: 'ie10'})) .pipe(rename({ suffix: '.min'})) .pipe(size({title: 'css'})) .pipe(sourcemaps.mapSources(function(sourcePath, file) { if(sourcePath.includes("..")) { return sourcePath; } return '../../../src/less/' + sourcePath; })) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest('web/dist/css/')) .on('end', function() { console.log("done css") }); });
Then in the map file i'm getting
"version":3,"sources":["../../../src/less/mysite.css","../../bootstrap/less/normalize.less","../../bootstrap/less/print.less","../../bootstrap/less/glyphicons.less","../../bootstrap/less/mixins/vendor-prefixes.less","../../bootstrap/less/scaffolding.less","../../bootstrap/less/mixins/tab-focus.less","../../bootstrap/less/mixins/image.less","../../bootstrap/less/type.less","../../bootstrap/less/mixins/text-emphasis.less","../../bootstrap/less/mixins/background-variant.less","../../bootstrap/less/mixins/text-overflow.less","../../bootstrap/less/code.less","../../bootstrap/less/grid.less","../../bootstrap/less/mixins/grid.less","../../bootstrap/less/mixins/grid-framework.less","../../bootstrap/less/tables.less","../../bootstrap/less/mixins/table-row.less","../../bootstrap/less/forms.less","../../bootstrap/less/mixins/forms.less","../../bootstrap/less/buttons.less","../../bootstrap/less/mixins/buttons.less","../../bootstrap/less/mixins/opacity.less","../../bootstrap/less/component-animations.less","../../bootstrap/less/dropdowns.less","../../bootstrap/less/mixins/nav-divider.less","../../bootstrap/less/button-groups.less","../../bootstrap/less/mixins/border-radius.less","../../bootstrap/less/input-groups.less","../../bootstrap/less/navs.less","../../bootstrap/less/navbar.less","../../bootstrap/less/mixins/nav-vertical-align.less","../../bootstrap/less/utilities.less","../../bootstrap/less/breadcrumbs.less","../../bootstrap/less/pagination.less","../../bootstrap/less/mixins/pagination.less","../../bootstrap/less/pager.less","../../bootstrap/less/labels.less","../../bootstrap/less/mixins/labels.less","../../bootstrap/less/badges.less","../../bootstrap/less/jumbotron.less","../../bootstrap/less/thumbnails.less","../../bootstrap/less/alerts.less","../../bootstrap/less/mixins/alerts.less","../../bootstrap/less/progress-bars.less","../../bootstrap/less/mixins/gradients.less","../../bootstrap/less/mixins/progress-bar.less","../../bootstrap/less/media.less","../../bootstrap/less/list-group.less","../../bootstrap/less/mixins/list-group.less","../../bootstrap/less/panels.less","../../bootstrap/less/mixins/panels.less","../../bootstrap/less/responsive-embed.less","../../bootstrap/less/wells.less","../../bootstrap/less/close.less","../../bootstrap/less/modals.less","../../bootstrap/less/tooltip.less","../../bootstrap/less/mixins/reset-text.less","../../bootstrap/less/popovers.less","../../bootstrap/less/carousel.less","../../bootstrap/less/mixins/clearfix.less","../../bootstrap/less/mixins/center-block.less","../../bootstrap/less/mixins/hide-text.less","../../bootstrap/less/responsive-utilities.less","../../bootstrap/less/mixins/responsive-visibility.less","../../../src/less/components/k_headings.less",
when i inspect an element its picking up the source map for mysite.css but i want it to show the less file entry e.g k_headings.less
What am i missing?
i have this set up as follows to generate .min css with sourcemaps to less files.
gulp.task("stylesheets", function () { return gulp.src('web/src/less/*.less') .pipe(sourcemaps.init({largeFile: true})) .pipe(sourcemaps.identityMap()) .pipe(less()) .pipe(postcss(plugins)) .pipe(stripCssComments({preserve: true})) .pipe(cleanCSS({compatibility: 'ie10'})) .pipe(rename({ suffix: '.min'})) .pipe(size({title: 'css'})) .pipe(sourcemaps.mapSources(function(sourcePath, file) { if(sourcePath.includes("..")) { return sourcePath; } return '../../../src/less/' + sourcePath; })) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest('web/dist/css/')) .on('end', function() { console.log("done css") }); });Then in the map file i'm getting
"version":3,"sources":["../../../src/less/mysite.css","../../bootstrap/less/normalize.less","../../bootstrap/less/print.less","../../bootstrap/less/glyphicons.less","../../bootstrap/less/mixins/vendor-prefixes.less","../../bootstrap/less/scaffolding.less","../../bootstrap/less/mixins/tab-focus.less","../../bootstrap/less/mixins/image.less","../../bootstrap/less/type.less","../../bootstrap/less/mixins/text-emphasis.less","../../bootstrap/less/mixins/background-variant.less","../../bootstrap/less/mixins/text-overflow.less","../../bootstrap/less/code.less","../../bootstrap/less/grid.less","../../bootstrap/less/mixins/grid.less","../../bootstrap/less/mixins/grid-framework.less","../../bootstrap/less/tables.less","../../bootstrap/less/mixins/table-row.less","../../bootstrap/less/forms.less","../../bootstrap/less/mixins/forms.less","../../bootstrap/less/buttons.less","../../bootstrap/less/mixins/buttons.less","../../bootstrap/less/mixins/opacity.less","../../bootstrap/less/component-animations.less","../../bootstrap/less/dropdowns.less","../../bootstrap/less/mixins/nav-divider.less","../../bootstrap/less/button-groups.less","../../bootstrap/less/mixins/border-radius.less","../../bootstrap/less/input-groups.less","../../bootstrap/less/navs.less","../../bootstrap/less/navbar.less","../../bootstrap/less/mixins/nav-vertical-align.less","../../bootstrap/less/utilities.less","../../bootstrap/less/breadcrumbs.less","../../bootstrap/less/pagination.less","../../bootstrap/less/mixins/pagination.less","../../bootstrap/less/pager.less","../../bootstrap/less/labels.less","../../bootstrap/less/mixins/labels.less","../../bootstrap/less/badges.less","../../bootstrap/less/jumbotron.less","../../bootstrap/less/thumbnails.less","../../bootstrap/less/alerts.less","../../bootstrap/less/mixins/alerts.less","../../bootstrap/less/progress-bars.less","../../bootstrap/less/mixins/gradients.less","../../bootstrap/less/mixins/progress-bar.less","../../bootstrap/less/media.less","../../bootstrap/less/list-group.less","../../bootstrap/less/mixins/list-group.less","../../bootstrap/less/panels.less","../../bootstrap/less/mixins/panels.less","../../bootstrap/less/responsive-embed.less","../../bootstrap/less/wells.less","../../bootstrap/less/close.less","../../bootstrap/less/modals.less","../../bootstrap/less/tooltip.less","../../bootstrap/less/mixins/reset-text.less","../../bootstrap/less/popovers.less","../../bootstrap/less/carousel.less","../../bootstrap/less/mixins/clearfix.less","../../bootstrap/less/mixins/center-block.less","../../bootstrap/less/mixins/hide-text.less","../../bootstrap/less/responsive-utilities.less","../../bootstrap/less/mixins/responsive-visibility.less","../../../src/less/components/k_headings.less",when i inspect an element its picking up the source map for mysite.css but i want it to show the less file entry e.g k_headings.less
What am i missing?