Learning Meteor.js [Part 10]: Using the LESS pre-processor in meteor

My last change demonstrates a component (the list of ingredients) being reused in several pages. This is meant to be an isolated component and I wanted to make sure I had a strategy for organizing the CSS rules for each piece to prevent clashes. The idea was to add a class name to the top level element of the component and then write all CSS rules nested within.

For example, the markup would be:

<template name="ingredientsListPart">
  <div class="ingredientsListPart">
   ...
  </div>
</template>

And then all the rules would be nested inside:

.ingredientsListPart {   
    .ingredient-item {
        overflow: auto;
    }

    .ingredient-img {
        float: left;
    }
}

This nesting syntax is not native to CSS and this is where the less pre-processor came in. Luckily, meteor has a less package. After installing it, you can add .less files and as long as they are imported they will be processed at build time and included on the page.

Great! BUT... If you use this approach you lose the ability to import the stylesheet directly from the view file. Instead, meteor forces you to have an entry .less file at the root of your project that imports all the other files. I am not a fan of this extra level of indirection but I spent a good two hours trying to get around this to no avail. I even tried using PostCSS, but that doesn't support it either.

Additionally, the less package does not support wild cards in its import statements, so you are left with this unrelated file, far away from the concern of the view, importing the .less files for the rest of the application. Bummer.

You can follow the code along by using this tag or visit the live demo.