CSS 使用源映射编译 LESS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20979732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Compile LESS files with source maps
提问by rink.attendant.6
How can I compile a LESS file to output a source map file (.css.map) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc) and on any GUI-based programs?
.css.map除了 CSS 文件之外，如何编译 LESS 文件以输出源映射文件 ( )？有没有办法在命令行（NodeJS lessc）和任何基于 GUI 的程序上做到这一点？
回答by betaorbust
Update: New shortest answer
更新：新的最短答案
The docs have been updated! As new features hit LESS, sometimes the docs lag behind a bit, so if you're looking for bleeding-edge features, you're still probably better off running lessc(see longer answer) and checking what pops out of the help text.
文档已更新！由于新功能较少，有时文档会滞后一点，因此如果您正在寻找前沿功能，您可能仍然最好运行lessc（查看更长的答案）并检查帮助文本中弹出的内容。
Short answer
简答
You're looking for any number of the following options from the command line:
您正在从命令行寻找以下任意数量的选项：
--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
As I write this I'm not aware of any GUI options that generate maps (source maps were only added to LESS in the last few months) -- sorry to not have any better news. I'm sure they'll add support in as they update over the next year.
在我写这篇文章时，我不知道有任何生成地图的 GUI 选项（源地图仅在过去几个月中添加到 LESS）——抱歉没有更好的消息。我相信他们会在明年更新时添加支持。
Longer answer
更长的答案
If you run lessc from the command line without any parameters it will give you all the options. (In my experience, this is more up to date than their documentation, so it'll at least get you pointed in the right direction.) with all the most recent map stuff included.
如果您在没有任何参数的情况下从命令行运行 lessc，它将为您提供所有选项。（根据我的经验，这比他们的文档更新，所以它至少会让你指向正确的方向。）包括所有最新的地图内容。
The easiest combo to use for dev is --source-map-less-inline --source-map-map-inlineas that will give you your source maps embedded in your output css.
用于 dev 的最简单组合是--source-map-less-inline --source-map-map-inline因为它将为您提供嵌入在输出 css 中的源映射。
If you'd like to add a separate map file, you can use --source-mapwhich, from my.lesswill output my.cssand my.css.map
如果你想添加一个单独的地图文件，你可以使用--source-mapwhich, frommy.less将输出my.css和my.css.map
For reference: when I run my copy (v 1.6.1 at the moment) I get
供参考：当我运行我的副本（目前为 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.
回答by am80l
If the command line doesn't suite you, Grunt is great at this type of thing. You can configure the grunt-contrib-less plugin to generate inline maps with a config like this:
如果命令行不适合您，Grunt 非常擅长这种类型的事情。您可以配置 grunt-contrib-less 插件以使用如下配置生成内联映射：
less: {
options: {
sourceMap:true,
outputSourceFiles: true
},
lessFiles: {
expand: true,
flatten:false,
src: ['**/*.less'],
dest: ['dist/'],
ext: '.css',
}
},
回答by Arun Prakash
Example to Create Map and CSS file from Less File
从 Less 文件创建地图和 CSS 文件的示例
- Install latest Node JS and go to command prompt and run
npm install less, Now less installed successfully - Go to Command Prompt and move to less file folder that we are going to create
- 安装最新的Node JS并进入命令提示符并运行
npm install less，现在安装成功了 - 转到命令提示符并移动到我们要创建的 less 文件夹
For e.g., I am going to change HelloWorld [Less File]
例如，我要更改 HelloWorld [Less File]
In Command prompt go to C:\Project\CSS or give the correct path in the below command.
在命令提示符下转到 C:\Project\CSS 或在下面的命令中提供正确的路径。
Run following Command in Command Prompt
在命令提示符中运行以下命令
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
Now CSS and Map file is generated in the respective folder.
现在 CSS 和 Map 文件在各自的文件夹中生成。
For more reference check the link : royalarun.blogspot.com
如需更多参考，请查看链接：royararun.blogspot.com
