问题标题几乎说明了一切。我不知道如何配置 咕噜-的contrib少 现在支持源映射的任务。我的预期结果是让Chrome DevTools CSS检查器指向Less规则。如果可能的话，理想的情况是源映射在同一输出的CSS文件中内联，以避免使用单独的源映射文件混乱我的工作区。
谢谢
问题标题几乎说明了一切。我不知道如何配置 咕噜-的contrib少 现在支持源映射的任务。我的预期结果是让Chrome DevTools CSS检查器指向Less规则。如果可能的话，理想的情况是源映射在同一输出的CSS文件中内联，以避免使用单独的源映射文件混乱我的工作区。
谢谢
这是我的gruntfile.js，它有效。
更新为grunt-contrib-less v0.9.0是很重要的 使用“XXX.css.map”而不是“XXX.map”也很重要。并且在给出了适当的sourcebasepath后它工作了。下面我将发布结果.map文件的摘录。
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: false,
optimization: 2,
sourceMap: true,
sourceMapFilename: "assets/style/bootstrap.css.map",
sourceMapBasepath: "assets/style/"
},
files: {
// target.css file: source.less file
"assets/style/bootstrap.css": "assets/style/bootstrap.less"
}
}
},
watch: {
styles: {
// Which files to watch (all .less files recursively in the less directory)
files: ['assets/style/theme/**/*.less'],
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
这是使用lessc生成的.map文件的摘录，当然有效：
{"version":3,"file":"bootstrap.css","sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less"...
这是使用grunt-contrib-less 0.9.0生成的.map文件的摘录，它也适用：
{"version":3,"sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less","theme/page-work.less"...
亲切的问候， 斯蒂芬
这是我的gruntfile.js，它有效。
更新为grunt-contrib-less v0.9.0是很重要的 使用“XXX.css.map”而不是“XXX.map”也很重要。并且在给出了适当的sourcebasepath后它工作了。下面我将发布结果.map文件的摘录。
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: false,
optimization: 2,
sourceMap: true,
sourceMapFilename: "assets/style/bootstrap.css.map",
sourceMapBasepath: "assets/style/"
},
files: {
// target.css file: source.less file
"assets/style/bootstrap.css": "assets/style/bootstrap.less"
}
}
},
watch: {
styles: {
// Which files to watch (all .less files recursively in the less directory)
files: ['assets/style/theme/**/*.less'],
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
这是使用lessc生成的.map文件的摘录，当然有效：
{"version":3,"file":"bootstrap.css","sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less"...
这是使用grunt-contrib-less 0.9.0生成的.map文件的摘录，它也适用：
{"version":3,"sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less","theme/page-work.less"...
亲切的问候， 斯蒂芬
首先，您需要确保grunt-contrib-less运行的是支持Source Maps的版本。最新版本是0.9.0，所以更新package.json文件中使用的版本，如下所示：
"dependencies" : {
...[other dependencies]...
"grunt-contrib-less" : "0.9.0"
}
现在在命令行中，调用 npm install 安装更新。
接下来，在您的Gruntfile.js中，为您的项目配置Source Maps。
你可以在这里关注指南： http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ 或者在这里： http://roots.io/using-less-source-maps/，但这是一个示例配置：
less : {
development : {
options : {
strictImports : true,
sourceMap: true,
sourceMapFilename: '../css/common.css.map',
sourceMapURL: 'http://localhost/css/common.css.map'
},
files : {
'../css/common.css' : '../less/common.less'
}
},
},
关键是要确保用于sourceMapURL的任何内容都是可以在浏览器中打开的实际URL。