Custom CSS override with LESS (build plugin)

help
1

Hi, we’re using

Meteor 1.8.1 with Blaze and LESS files.

We amongst out LESS files, we have one specific LESS file which has separated the custom params that we’d like to change on a per deployment basis, hopefully from some sort of settings and/or external URL.

I am trying to find the best way, so that custom deployments can change the CSS via the LESS file dynamically, without having to swap the LESS file out, on a per custom deployment basis basis.

As this is part of the build process, I think it requires a custom build plugin https://docs.meteor.com/api/packagejs.html#build-plugin-compilers

So I was looking for some help on a) options for doing this and b) if a custom build plugin is the way to do this, I was hoping there may be some cheat sheet/example, assuming others must have asked for the same thing.

thanks in advance

2

I’m also using LESS, but in your case I would consider using CSS varialbes as they can be changed at runtime. That way you could store style variables in the db. Proof of concept:

test.css 
    :root {
        --color1: green;
    }

    body {
        background-color: var(--color1);
    }

test.coffee
    Template.test.onRendered ->
        html = document.getElementsByTagName('html')[0]
        html.style.cssText = "--color1: red"
3

Thanks @softwarerero, ha we actually discussed this with the team yesterday… I think it will break in IE11 https://caniuse.com/#feat=css-variables ?