Gruntjs LESS/Grunt没有将sourcemap引用写入已编译CSS的末尾
我正在使用Gruntjs LESS/Grunt没有将sourcemap引用写入已编译CSS的末尾,gruntjs,less,grunt-contrib-watch,grunt-contrib-less,Gruntjs,Less,Grunt Contrib Watch,Grunt Contrib Less,我正在使用grunt contrib less将.less文件编译到单个CSS样式表中。一切都在工作,除了源地图,我无法在任何情况下工作 这是我的Grunfile文件: 'use strict'; module.exports = function(grunt) { // Force use of Unix newlines grunt.util.linefeed = '\n'; grunt.initConfig({ pkg: grunt.file.readJSON('packag
grunt contrib less
将.less
文件编译到单个CSS样式表中。一切都在工作,除了源地图,我无法在任何情况下工作
这是我的Grunfile文件:
'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'
]);
};
这是丢失的一行。所有其他内容都得到了正确的编译和编写。如果我手动将这一行添加到编译后的CSS的末尾,Chrome会正确地在源代码图上显示出来,但它没有被写入
此外,尝试像sourceMapFileInline
这样的选项似乎没有什么区别——文件从来都不是内联写入的
有什么想法吗?希望您现在已经找到了解决方案。这适用于具有相同问题的其他人:
- 确保soourcemap将与css放在同一文件夹中
- 将
仅设置为映射文件的名称sourceMapUrl
- 这将在.css文件中添加以下行:
/*#sourceMappingURL=default.css.map*/
sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"
sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"