Since Bootstrap v3.2 the grunt autoprefixer plugin is part of Bootstrap’s build process. This autoprefixer postprocessor makes the prefix mixins (found in less/mixins/vendor-prefixes.less) deprecated.
Less 2 introduced plugins for the Less compiler, see also http://lesscss.org/usage/#plugins. These plugins enables you to add your own postprocessors. Postprocessors change the compiled CSS code. An example can be found at: http://stackoverflow.com/a/26539622/1596547
Less provides its own autoprefixer plugin now. Leveraging the Less autoprefixer plugin enables you to compile the Bootstrap CSS without running Grunt.
- Download and unzip Bootstrap’s source files. These files can be found at: https://github.com/twbs/bootstrap/archive/v3.2.0.zip
- When you have not done yet. Update Less to version 2:
npm -g update less
- Than
install the autoprefix plugin by runningrunnpm -g install https://github.com/less/less-plugin-autoprefix/archive/master.tar.gz
(soon you should be able tonpm -g install less-plugin-autoprefix
too)(for now run npm install https://github.com/less/less-plugin-autoprefix/archive/master.tar.gz, which install the latest version and supports options)
Now you can compile Bootstrap’s CSS by running in your console:
lessc --autoprefix='Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8",iOS >= 6,Opera >= 12,Safari >= 6' less/bootstrap.less bootstrap.css
The autoprefix plugin takes care for your v3 source maps too, when running the compiler with the --source-map
or --inline-source-map
option. Use the compiler’s -x
open to compress your compiled CSS code. Since Less v2 the clean-css option has also been moved into in plugin. You can install the clean-css plugin by running npm install less-plugin-clean-css
.
One Response to “Compile Bootstrap with Less v2 and the autoprefix plugin”