Compile Bootstrap with Less v2 and the autoprefix plugin

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.

  1. Download and unzip Bootstrap’s source files. These files can be found at: https://github.com/twbs/bootstrap/archive/v3.2.0.zip
  2. When you have not done yet. Update Less to version 2: npm -g update less
  3. Than install the autoprefix plugin by running npm -g install https://github.com/less/less-plugin-autoprefix/archive/master.tar.gz (soon you should be able to run npm -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”

Leave a Reply

(will not be published)