我有这个gulp设置
require('es6-promise').polyfill();
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mmq = require('gulp-merge-media-queries');
var prefix = require('gulp-autoprefixer');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
var autoPrefixerOptions = {
browsers: ['last 2 version', '> 1%', 'ie 9']
};
gulp.task('sass', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(mmq())
.pipe(prefix(autoPrefixerOptions))
.pipe(sourcemaps.write('../maps', {includeContent: false, sourceRoot: '../../ui-dev/scss'}))
.pipe(gulp.dest('../Content/v2.0'));
});
gulp.task('watch', function() {
gulp.watch('./scss/**/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
我的结构如下
|-Content
|-maps
|-v2.0
|-- compiled css files here
|-dev
|-gulpfile.js
|-scss
|-.scss files
除了我的所有.map文件引用Content / v2.0目录中的.css而不是dev文件夹中的.scss文件之外，所有内容都按预期构建 .
我理解的源映射是它应该指向原始文件中的行号（是scss）以便于调试 .
我该如何解决这个问题或者我错过了什么？
更新
所以我意识到我错过了sourceRoute，但是由于我的sass在目录中的数百个文件中分散了几层，浏览器仍然没有选择 Map ，因为路径显示为“../../ui-dev/ scss“在所有 Map 中 .
如何获取每个源文件的正确路径？
1 回答
我最后分别编译每个文件夹并定义源的路径，直到找到更好的方法 .