@Import with client side less compilation

Question

I would like to create a bootstrap configuration page, rather like their own customise bootstrap page, but with live preview.

I want to therefore compile less files in the browser as detailed in this question, but I don't know how to handle @import.

Usually, less knows the path of the files to import, but in the browser context, the file path model does not apply.

How can I compile less browser side, and use the @import feature?

Answer 1

<link rel="stylesheet/less" type="text/css" href="global.less">
<script src="js/less.min.js" type="text/javascript"></script>

In the above global.less had been opened with a XMLHttpRequest, see also How to open a local disk file with Javascript?.

Files that you want to import in global.less with the @import directive can be places in the same directory global.less. Notice that this directory should be accessible by the browsers. Files can also be placed in a sub directory or a directory relative to the directory of global.less.

See also http://lesscss.org/usage/#using-less-in-the-browser you can set the option for the less.js compiler by defining a global less object before calling the compiler. This enables you to set the include_path and rootpath, the include_path can be used to define where to search for the imports whilst the rootpath re-write relative urls to the base less file.

NB For your live preview you should call less.refreshStyles() / less.modifyVars, see ModifyVars issue when trying to change variables one by one unless reloading (and recompiling) is allowed.