gpt4 book ai didi

less - 如何配置 grunt-contrib-less 以生成与 Chrome DevTools 兼容的源映射?

转载 作者:行者123 更新时间:2023-12-04 01:59:28 25 4
gpt4 key购买 nike

问题标题几乎说明了一切。我不知道如何配置grunt-contrib-less现在支持源映射的任务。我的预期结果是让 Chrome DevTools CSS 检查器指向 Less 规则。如果可能,最好将源映射内联在同一个输出的 CSS 文件中,以避免我的工作区被单独的源映射文件弄乱。

谢谢

最佳答案

这是我的 gruntfile.js,它有效。

更新到 grunt-contrib-less v0.9.0 很重要
使用“XXX.css.map”而不是“XXX.map”也很重要。它在提供了适当的源库路径后工作。下面我将发布结果 .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"...

亲切的问候,
斯蒂芬

关于less - 如何配置 grunt-contrib-less 以生成与 Chrome DevTools 兼容的源映射?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21172418/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com