[英]gulp sourcemap is created but not working
样式
无样式
@import "one.less";
@import "two.less";
少一个
body { background:red; }
二少
body { font-size: 12px; }
Gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
gulp.src('./src/assets/less/styles.less')
.pipe(less())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/css/'));
结果: styles.css +styles.map.css 被创建,但是当我进入网页时地图文件没有加载(而且当我检查“body”时我看到了styles.css)
链接
少喝 - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps
我很沮丧,我很感激任何帮助。 谢谢。
在初始化 sourcemap 插件之前,您正在“管道”到less()
,正确的方法是:
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
gulp.src('./src/assets/less/styles.less')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(less())//<<< between init and write
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/css/'));
好的,这就是我应该使用的 - https://github.com/radist2s/gulp-less-sourcemap
就我而言,我在init
和write
之间编写了代码,但仍然无法在浏览器中加载地图
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());
});
我添加了loadMaps: true
到sourcemaps.init()
并且一切正常
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());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.