You cannot do both, use the Client-side mode of LESS to ease development and use the lesscss-maven-plugin to automatically compile the LESS-sources into CSS for production. That does not work, because your stylesheets must be linked in different ways if you are switching between the client-side mode – which is best for development – and the pre-compiled mode – which is best for production. For the client-side mode you need something like:
- <link rel="stylesheet" type="text/css" href="styles.less" />
- <script src="less.js" type="text/javascript"></script>
+ <link rel="stylesheet/less" type="text/css" href="styles.less" />
+ <script src="../less.js" type="text/javascript"></script>
While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:
- <link rel="stylesheet" type="text/css" href="styles.css" />
+ <link rel="stylesheet/less" type="text/css" href="styles.css" />
While looking for a solution to this dilemma, I stumbled accross wro4j. Originally intended, to speed up page-delivery by combining and minimizing multiple resources into one through the use of a servlet-filter, this tool also comes with a maven-plugin, that let you do the same offline, while compiling your webapp.