css - 使用源映射编译 LESS 文件

标签 css compilation less source-maps lesscss-resources

除了 CSS 文件之外,如何编译 LESS 文件以输出源映射文件 (.css.map)?有没有办法在命令行(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

在我写这篇文章时,我不知道有任何生成 map 的 GUI 选项(源 map 在过去几个月才添加到 LESS)——很抱歉没有更好的消息。我相信他们会在明年更新时添加支持。

更长的答案

如果你从命令行运行 lessc 而不带任何参数,它将为你提供所有选项。 (根据我的经验,这比他们的文档更新,所以它至少会让你指向正确的方向。)包括所有最新的 map 内容。

用于 dev 的最简单的组合是 --source-map-less-inline --source-map-map-inline 因为它会给你嵌入在输出 css 中的源映射。

如果你想添加一个单独的 map 文件,你可以使用 --source-map ,从 my.less 将输出 my. cssmy.css.map

供引用:当我运行我的副本时(目前是 v 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.

关于css - 使用源映射编译 LESS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20979732/

相关文章:

css - 使用 less 和 Twitter bootstrap

html - 工具提示被 div 容器截断

c# - ASP.NET 中的动态代码

c - 如何生成 stm32 代码的二进制文件?

python - 如何在不启用 sigaltstack 的情况下编译 python 3?

javascript - 从 webpack 包中排除 less-loader

css - 如何在 Less 中嵌套规则以定义类行为

javascript - Jquery - 动态添加的输入字段不会发送值以发布

php - 打印时避免在一个表格行中分页

html - 无法调整 PayPal 按钮上方和下方的填充/间距?