csscompilationlesssource-mapslesscss-resources

Compile LESS files with source maps


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?


Solution

  • 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/

    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.

    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.

    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.

    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

    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.