我正在使用 grunt 0.4.2 和 grunt-contrib-less 0.9.0。我希望我的 LESS 被编译成支持源映射的 CSS。
我的 LESS 文件在 public/less
中,最主要的文件叫做 main.less
。
将 public/less/main.less
编译成 public/css/main.css
可以,但源映射不起作用。
我下面的 Grunt 配置有什么问题?
{
less: {
dev: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
},
files: {
"public/css/main.css": "public/less/main.less"
}
}
},
watch: {
styles: {
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
nospaces: true
}
}
}
}
我不想在我的 /public/less
文件夹中创建我的 CSS;我想把它放到 /public/css
中。否则,我可以使用其他有效的配置:
{
less: {
dev: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: "public/less/main.css.map", //I DO NOT WANT THE CSS MAP HERE
sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
},
files: {
"public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE
}
}
},
watch: {
styles: {
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
nospaces: true
}
}
}
}
最佳答案
我发现 LESS 站点文档对于 grunt-contrib-less 使用的参数更加清晰。
LESS:命令行用法 http://lesscss.org/usage/#command-line-usage-installing-lessc
NPM:grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-less
文件结构:
laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map
文件 'main.css.map' 注意:
- 如果你愿意,你可以重命名为:main.css.source-map.json
- 我猜你有一些服务器规则设置不能从“css”文件夹正确地服务器 *.map 文件
压缩说明:
- cleancss: true = 将从 main.css 中删除 sourceMappingURL 注释
- yuicompress: true = 不会从 main.css 中删除 sourceMappingURL 注释
Gruntfile.js
less: {
dev: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: 'public/css/main.css.map', // where file is generated and located
sourceMapURL: '/css/main.css.map', // the complete url and filename put in the compiled css file
sourceMapBasepath: 'public', // Sets sourcemap base path, defaults to current working directory.
sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
},
files: {
'public/css/main.css': 'public/less/main.less',
}
}
},
watch: {
styles: {
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
nospaces: true
}
}
},
laravel/public/css/main.css
.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */
laravel/public/css/main.css.map
{"version":3,"sources":["/less/main.less"], etc...
关于css - 如何使用 Grunt 为 LESS 配置 sourceMaps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21743160/