LESS/Grunt не записывает ссылку на исходную карту в конец скомпилированного CSS
Я использую grunt-contrib-less
собрать мой .less
файлы в одну таблицу стилей CSS. Все работает, кроме исходной карты, которую я не могу заставить работать ни при каких обстоятельствах!
Вот мой Gruntfile:
'use strict';
module.exports = function(grunt) {
// Force use of Unix newlines
grunt.util.linefeed = '\n';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: {
// Add entries to this array to create variables for use by Grunt
app: ['app'],
server: 'http://mysite.app',
// Components
bower: ['<%= project.app %>/bower_components'],
bootstrap: ['<%= project.bower %>/bootstrap'],
// Custom Assets
assets: ['<%= project.app %>/assets'],
css: ['<%= project.assets %>/css'],
less: ['<%= project.assets %>/less'],
js: ['<%= project.assets %>/js']
},
less: {
production: {
options: {
ieCompat: true,
sourceMap: true,
sourceMapFilename: '<%= project.css %>/style.css.map',
sourceMapURL: '<%= project.server %>/assets/css/style.css.map',
sourceMapBasepath: 'app',
sourceMapRootpath: '<%= project.server %>'
},
files: {
'<%= project.css %>/style.css': '<%= project.less %>/style.less'
}
}
},
autoprefixer: {
dist: {
files: {
'<%= project.assets %>/css/style.css': '<%= project.assets %>/css/style.css'
}
}
},
concat: {
options: {
separator: ';\n',
sourceMap: true
},
plugins_head: {
// Add further Javascript plugins to this array and they will be
// concatenated in to the plugins-built-head.js file
src: [
'<%= project.bower %>/modernizr/modernizr.js'
],
dest: '<%= project.js %>/built/plugins-built-head.js'
},
plugins: {
// Add further Javascript plugins to this array and they will be
// concatenated in to the plugins-built.js file
src: [
'<%= project.bootstrap %>/js/dropdown.js'
],
dest: '<%= project.js %>/built/plugins-built.js'
},
custom: {
// Add further custom-written javascript files to this array and
// they will be concatenated in to the scripts-built.js file
src: [
'<%= project.js %>/scripts.js'
],
dest: '<%= project.js %>/built/scripts-built.js'
}
},
watch: {
css: {
files: [
'<%= project.bootstrap %>/less/*.less',
'<%= project.less %>/*.less'
],
tasks: [
'less',
'autoprefixer'
],
options: {
livereload: true
}
},
js: {
files: [
'<%= project.js %>/scripts.js'
],
tasks: ['concat']
},
html: {
files: [
'<%= project.app %>/*.html'
],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-run-grunt');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'watch'
]);
};
Происходит то, что Грант пишет правильно и правильно style.css.map
файл, но он не записывает следующую строку в конец скомпилированного style.css
файл:
/*# sourceMappingURL=http://mysite.app/assets/css/style.css.map */
Это одна строка, которая отсутствует. Все остальное компилируется и пишется правильно. Если я вручную добавлю эту строку в конец скомпилированного CSS, Chrome правильно подберет исходную карту, но она не будет записана.
Кроме того, попробуйте варианты, такие как sourceMapFileInline
кажется, не имеет значения - файл никогда не пишется в строке.
Есть идеи?
1 ответ
Надеюсь, вы уже нашли решение. Это для других людей с той же проблемой:
- Убедитесь, что карта ресурсов будет помещена в ту же папку, что и css.
- Задавать
sourceMapUrl
только имя файла карты. - Это добавит следующую строку в ваш файл.css:
/*# sourceMappingURL=default.css.map */
Вот настройки исходной карты в моем файле grunt:
sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"