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?
相关问题
- Adding a timeout to a render function in ReactJS
-
Why does the box-shadow property not apply to a
- Add animation to jQuery function Interval
- Angular: ngc or tsc?
- jQuery hover to slide?
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:
https://github.com/gruntjs/grunt-contrib-less
Example to Create Map and CSS file from Less File
npm install less
, Now less installed successfullyFor e.g., I am going to change HelloWorld [Less File]
In Command prompt go to C:\Project\CSS or give the correct path in the below command.
Run following Command in Command Prompt
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
Now CSS and Map file is generated in the respective folder.
For more reference check the link : royalarun.blogspot.com
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:
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, frommy.less
will outputmy.css
andmy.css.map
For reference: when I run my copy (v 1.6.1 at the moment) I get