LESS compiling and theming

[Phil Gates-Idem]

For my project I need to support theming and because of this I want to keep the JavaScript dependency graph separate from the LESS/CSS dependency graph. That is, I should be able to build my theme bundle separately from the JavaScript bundle. That means that I don't want to have *.js and *.less files within the same raptor dependencies array in the package.json file.

At a high level, I want to build all of the LESS files associated with all of the modules and specify automatic imports (such as "variables.less") that will be imported first before importing all of the dependent LESS files. I don't think the LESS compiler should be compiling one file at a time (and importing variables.less each time, for example -- this seems wrong because it adds a lot of redundant parsing of the variables.less file). I would rather build an intermediate file that has an @import statement for every LESS dependency with the first imports being the automatic imports of the variables, mixins, etc.

I still want to have one package.json per module but I want to put the theme dependencies in a separate section of this file. As a rough idea, something like this:

{

    "raptor": {

        "dependencies": [

            "MyWidget.js"

        ],

        "themeDependencies": [

            "MyWidget.less",

            "MyWidgetExtras.less"

        ]

    }

}

My theme builder would then do the same type of building/bundling/optimizing but use "themeDependencies" property as the source of dependencies. It would be better, if the first pass of compiling found all of the dependencies and then second pass would actually compile something like this:

@import "/variables.less"

@import "/mixins.less"

@import "/MyWidget.less"

@import "/MyWidgetExtras.less"

What are your thoughts and making this work?

[Patrick Steele-Idem]

Take a look at the following custom dependency:

https://github.com/rebootstrap/rebootstrap/blob/master/src/rebootstrap/Dependency_rebootstrap-less.js

It's a custom dependency type for Rebootstrap that automatically imports a user-defined "variables.less" to a less file before compiling which enables theming. The following code illustrates how to use the "rebootstrap-less" dependency in your package.json:

{ "type": "rebootstrap-less", "path": "buttons.less" }

Or., in your page template:

<dependencies>

  ...

  <rebootstrap-less path="buttons.less"/>

</dependencies>

To use Reboostrap you will need to install "rebootstrap" into your app using the following command:

npm install reboostrap --save

--Patrick

[Phil Gates-Idem]

I saw how you implemented Dependency_rebootstrap-less.js but that's not exactly what I am looking for. That approach only works well if there is one "theme" and it gets built along with the JavaScript code. I want to do multiple theme builds using different values for the variables.