Compile LESS files with source maps
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.
How to have sourcemaps include all my LESS files with gulp
As far as i understand your configuration generate the following sourcemap code:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLHlCQUFBIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAndmFycyc7XG5cbmJvZHl7XG4gIGJhY2tncm91bmQtY29sb3I6IEBibGF1O1xufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
The encoded version:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAEA;EACE,yBAAA","file":"main.css","sourcesContent":["@import 'vars';\n\nbody{\n background-color: @blau;\n}\n"],"sourceRoot":"/source/"}
Your vars.less
does not generate any output to the CSS and so should not included in the sourcemap.
As soon as your vars.less
generates output, for instance add .selector {p:1;}
at the end of this file, the file will also be included in the source map:
{"version":3,"sources":["vars.less","main.less"],"names":[],"mappings":"AACA;EAAW,IAAA;;ACCX;EACE,yBAAA","file":"main.css","sourcesContent":["@blau : #6621ab;\n.selector {p:1;}\n","@import 'vars';\n\nbody{\n background-color: @blau;\n}\n"],"sourceRoot":"/source/"}
Notice that the lessc compiler has different option for source maps:
--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
The gulp-sourcemaps outputs the same result as compiling with both the --source-map-less-inline
and --source-map-map-inline
options
Output multiple LESS source maps with Grunt?
The crummy brute-force method is to simply define a second build process and make sure that your build processes call both less.development1
and less.development2
:
less: {
"development1": {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: "<%= yeoman.app %>/live_preview/b/css/theme.css.map"
},
files: {
// target.css file: source.less file
"<%= yeoman.app %>/live_preview/b/css/theme.css": "<%= yeoman.app %>/less/theme.less"
}
},
"development2": {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: "<%= yeoman.app %>/live_preview/b/css/main.css.map"
},
files: {
// target.css file: source.less file
"<%= yeoman.app %>/live_preview/b/css/main.css": "<%= yeoman.app %>/less/main.less"
}
}
}
How to configure sourceMaps for LESS using Grunt?
I found the LESS site documentation to be more clear regarding params used by grunt-contrib-less.
LESS: Command Line Usage
http://lesscss.org/usage/#command-line-usage-installing-lessc
NPM: grunt-contrib-less
https://www.npmjs.org/package/grunt-contrib-less
File structure:
laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map
File 'main.css.map' note:
- If you wish, you can rename to: main.css.source-map.json
- I guess you have some server rule setup that doesn't server *.map files properly from the 'css' folder
Compression notes:
- cleancss: true = will remove sourceMappingURL comment from main.css
- yuicompress: true = will NOT remove sourceMappingURL comment from main.css
Gruntfile.js
less: {
dev: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
sourceMap: true,
sourceMapFilename: 'public/css/main.css.map', // where file is generated and located
sourceMapURL: '/css/main.css.map', // the complete url and filename put in the compiled css file
sourceMapBasepath: 'public', // Sets sourcemap base path, defaults to current working directory.
sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
},
files: {
'public/css/main.css': 'public/less/main.less',
}
}
},
watch: {
styles: {
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
nospaces: true
}
}
},
laravel/public/css/main.css
.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */
laravel/public/css/main.css.map
{"version":3,"sources":["/less/main.less"], etc...
Is there any way to compile less files with @imports and concatenate them with Gulp, all in the same stream?
You simply need to specify the paths
option for gulp-less to tell it where it should start searching for files specified with @import directives.
For e.g., in widgets.less
, its trying to find
support-tickets.less
comments.less
article-comments.less
etc..
in
Library/WebServer/Documents/qjt2015/trunk/styles/less/
(see the error message that you posted) but I believe it should be inLibrary/WebServer/Documents/qjt2015/trunk/styles/less/widgets/
(relative to yourwidgets.less
file)
Simply set the path(s) like so:
gulp.task('buildStyles', function() {
return gulp.src([
// ...
])
// ... other gulp tasks here
.pipe(less({
paths: [
'/Library/WebServer/Documents/qjt2015/trunk/styles/less/',
'/Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/',
'/Library/WebServer/Documents/qjt2015/trunk/styles/less/pages/',
// add additional paths here for less to find imports in
// less will tell you which import files it can't find, so simply tell it where to find them.
]
))
.pipe(concat('allmin.css'))
// ...
});
```
Related Topics
Css3 Transitions: Is There an on Click Option Without Using Jquery
Fontawesome - Failed to Decode Downloaded Font
Infinite Image Slider with Pure CSS3
CSS Filter Cancels Element Position
What Does a CSS Selector in Square Brackets Select in HTML
CSS Set Width to Fill % of Remaining Area
Reducing the Gap Between a Bullet and Text in a List Item
User Agent Stylesheet Overriding My Table Style? Twitter Bootstrap
Create a Radial Gradient for Internet Explorer 6/7/8
How to Compensate for Vertical Scrollbar When It Is Not Yet Present
Differencebetween Applying CSS Transition Property in Hover Rather Than in Its Normal State
CSS Menu - Keep Parent Hovered While Focus on Submenu