.css.map
除了CSS文件之外,如何编译LESS文件以输出源映射文件()?有没有办法在命令行(NodeJS lessc
)和任何基于GUI的程序上执行此操作?
文档已更新!随着LESS的新功能的出现,有时候文档会稍微落后一些,所以如果你正在寻找最前沿的功能,你仍然可能会更好地运行lessc
(查看更长的答案)并检查帮助文本中弹出的内容.
http://lesscss.org/usage/
您正在从命令行中查找以下任意数量的选项:
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map) --source-map-rootpath=X adds this path onto the sourcemap filename and less file paths --source-map-basepath=X Sets sourcemap base path, defaults to current working directory. --source-map-less-inline puts the less files into the map instead of referencing them --source-map-map-inline puts the map (and any less files) into the output css file --source-map-url=URL the complete url and filename put in the less file
在我写这篇文章时,我不知道任何生成地图的GUI选项(源地图在过去几个月里只被添加到LESS) - 抱歉没有任何更好的消息.我相信他们会在明年更新时增加支持.
如果从命令行运行lessc而没有任何参数,它将为您提供所有选项.(根据我的经验,这比他们的文档更新,因此它至少会让你指向正确的方向.)包含所有最新的地图内容.
用于开发的最简单的组合就是--source-map-less-inline --source-map-map-inline
为您提供嵌入在输出css中的源映射.
如果你想添加一个单独的地图文件,你可以使用--source-map
哪个,来自my.less
输出my.css
和my.css.map
供参考:当我运行我的副本时(目前为1.6.1)我得到了
usage: lessc [option option=parameter ...] <source> [destination] If source is set to `-' (dash or hyphen-minus), input is read from stdin. options: -h, --help Print help (this message) and exit. --include-path=PATHS Set include paths. Separated by `:'. Use `;' on Windows. -M, --depends Output a makefile import dependency list to stdout --no-color Disable colorized output. --no-ie-compat Disable IE compatibility checks. --no-js Disable JavaScript in less files -l, --lint Syntax check only (lint). -s, --silent Suppress output of error messages. --strict-imports Force evaluation of imports. --insecure Allow imports from insecure https hosts. -v, --version Print version number and exit. -x, --compress Compress output by removing some whitespaces. --clean-css Compress output using clean-css --clean-option=opt:val Pass an option to clean css, using CLI arguments from https://github.com/GoalSmashers/clean-css e.g. --clean-option=--selectors-merge-mode:ie8 and to switch on advanced use --clean-option=--advanced --source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map) --source-map-rootpath=X adds this path onto the sourcemap filename and less file paths --source-map-basepath=X Sets sourcemap base path, defaults to current working directory. --source-map-less-inline puts the less files into the map instead of referencing them --source-map-map-inline puts the map (and any less files) into the output css file --source-map-url=URL the complete url and filename put in the less file -rp, --rootpath=URL Set rootpath for url rewriting in relative imports and urls. Works with or without the relative-urls option. -ru, --relative-urls re-write relative urls to the base less file. -sm=on|off Turn on or off strict math, where in strict mode, math --strict-math=on|off requires brackets. This option may default to on and then be removed in the future. -su=on|off Allow mixed units, e.g. 1px+1em or 1px*1px which have units --strict-units=on|off that cannot be represented. --global-var='VAR=VALUE' Defines a variable that can be referenced by the file. --modify-var='VAR=VALUE' Modifies a variable already declared in the file. -------------------------- Deprecated ---------------- -O0, -O1, -O2 Set the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree. --line-numbers=TYPE Outputs filename and line numbers. TYPE can be either 'comments', which will output the debug info within comments, 'mediaquery' that will output the information within a fake media query which is compatible with the SASS format, and 'all' which will do both. --verbose Be verbose.
如果命令行不适合你,Grunt就是这种类型的东西.您可以配置grunt-contrib-less插件以使用如下配置生成内联映射:
less: { options: { sourceMap:true, outputSourceFiles: true }, lessFiles: { expand: true, flatten:false, src: ['**/*.less'], dest: ['dist/'], ext: '.css', } },
https://github.com/gruntjs/grunt-contrib-less