import less file to another less file but not include it's content

Question

I have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.

I'm including the main.css in to all my pages and the dash.css in to just the dashboard.

What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.

Has anyone ever came across this ?

After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.

Answer 1

Found a way. I had to use import like this:

@import (reference) "bootstrap.less";

.myclass{color:@bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}

Using "reference" will source the imported file but not include it.

Answer 2

Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

etc.so if you want to use variables you can import '@import "variables.less"' in your 'dash.less' thats it :)