Multiple LESS files import with nested variables and mixins for single CSS file

Question

I have asked to clean up the LESS library and style file referenced in the head section of the application for redundancy and decreasing load time. The style file is basically style.less file and it is containing all other less files, I need to come up with single CSS file that could be style.css so everything is fine like I am getting the CSS output as style.css but there are a couple of files which are not compiling and changing in CSS. Below is a preview of style.less with other imported less files.

content of style.less

@import url('variables.less');
@import url('mixins.less');
@import url('base.less');
@import url('kendo.less');
@import url('header.less');
@import url('navigation.less');
@import url('lists.less');
@import url('treeview.less');

Where that variables.less and mixins.less are not compiling in CSS I don't know what is missing, there are nested rules applied in them may be they are making errors as I heard that there is a need for a config file to process nested variables and mixins when imported and used for plain CSS. I am unable to find the solutions to this, your help will be highly appreciated. Many thanks.

@Lowkase I am sorry I forgot to mention the main thing, I am using visual studio with web essentials for auto pre-compiling and minifying code — Lightcoder
Files like mixin.less and variables.less are usually used for .. (yeah, suprise) variable and mixin definitions - they normally should not generate any CSS code on their own at all. Also speaking of "clean up", you don't need url in Less imports (unless it's real URL) - just @import 'variables'; etc. would be absolutely fine. — seven-phases-max
Also normally variables (assuming some it contains global definitions/overrides that may affect CSS in any other imported components) should be the last file in imports (because of lazy-loading). — seven-phases-max

Lowkase Lowkase · Accepted Answer · 2014-12-02T20:37:40

Here are my settings for the Web Essentials LESS Compiler:

OPTIONS > WEB ESSENTIALS > LESS

Auto-compile dependent files on save: TRUE
Compile files on build: TRUE
Compile files on save: TRUE
Create source map files: TRUE
Custom output directory: _PATH_TO_OUTPUT_YOUR_ONE_CSS_FILE
Don't save raw compilation output: FALSE
Process source maps: TRUE
Strict Math: FALSE
Show Preview Pane: TRUE

ALL of your LESS files except the main import LESS file should be prefixed with "_". So for example:

_base.less
_variables.less
style.less (holds the imports for base and variables).

Make sure you are using Web Essentials version 2.5. There was an error in the version after 2.5 that mucked up the precompiler. I don't know if they have updated with fixes yet.

Multiple LESS files import with nested variables and mixins for single CSS file

1 Answers