Import LESS w/out creating its separate CSS output file

Question

(I have searched various answers, but couldn't find anything relevant.)

I have two LESS files, say, file1.less and file2.less . file1.less contains import of file2.less . Files are compiled into .css OK so I have file1.css but the problem is that file2.less is ALSO compiled into file2.css besides its imported contents in file1.css . That is, I have duplicate contents of file2.less - in compiled file1.css and its own separate file2.css . Is there any way to have file2.less imported and file1.less and NOT create its own file2.css ? (I use WebStorm plugin compiler, if it matters.)

To make it visually clear, here's what I've got:

file1.less (eg, contains body { font-size: 100%; } and "@import file2.less")

file2.less (let's say it contains body { background-color: #ffffff; } )

RESULTS: file1.css with body { font-size: 100%; } body { font-size: 100%; } body { background-color: #ffffff; } body { background-color: #ffffff; }

AND

file2.css with body { background-color: #ffffff; } body { background-color: #ffffff; } (duplicate!!!)

How do I prevent file2.css from being created and just have it imported into file1?

Answer 1

This is something related to your compiler, not a LESS issue. I have never used this compiler of yours myself but I can suggest you to use http://winless.org/ if you are a Windows user (or less.app on Mac).

Winless watches a folder and subfolders for modifications (in .less files) and creates a ".css" based on the file you define as your bootstrap.