使用源映射编译LESS文件 [英] Compile LESS files with source maps
问题描述
如何编译LESS文件以输出除了CSS文件之外的源映射文件( .css.map
)?有没有办法在命令行(NodeJS的 lessc
)和任何基于GUI的程序?
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?
推荐答案
更新:新的最短回答
文档已更新!由于LESS的新功能,有时文档落后一点,所以如果你正在寻找出色的功能,你最好还是运行 lessc
(见更长的答案),并检查帮助文本中弹出的内容。
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.
http:// lesscss .org / usage /
您正在查找任意数量的以下选项从命令行:
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
当我写这个我不知道任何GUI选项生成地图(源地图只添加到LESS在过去几个月) - 抱歉没有任何更好的消息。我确定他们将在下一年更新时添加支持。
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.
如果你从命令行运行lessc没有任何参数,它会给你所有的选项。 (在我的经验,这是更新的比他们的文档,所以它会至少让你指向正确的方向。)所有最新的地图内容包括。
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.
用于开发的最简单的组合是 - source-map-less-inline --source-map-map-inline
The easiest combo to use for dev is --source-map-less-inline --source-map-map-inline
as that will give you your source maps embedded in your output css.
如果您想添加一个单独的地图文件,可以使用 - source-map
If you'd like to add a separate map file, you can use --source-map
which, from my.less
will output my.css
and my.css.map
作为参考:当我运行我的拷贝(v 1.6.1) b
$ b
For reference: when I run my copy (v 1.6.1 at the moment) I get
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.
这篇关于使用源映射编译LESS文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!