Share LESS variables between multiple micro-frontends applications

Question

I'm trying to figured out if it's possible share LESS variables among different React projects. I'm using Single-SPA to build a micro-frontends architecture. My micro-frontends are using some shared components like the react-microfrontend example does with react-mf/styleguide. Beside that, I also need to share some LESS variables (e.g. colors or typography) so I can just define them once into my styleguide project alike and then reference them in every micro-frontends I will define. Is that possible ? If yes, can you suggest to me a way to do that ? I guess the solution is to use webpack but I can't find the right way to do it.

Answer 1

I found two possible solutions:

CDN

// index.less file of my new app

@import url(https://your.cdn.url/file.less);

Use a CDN to serve the LESS file so it can be imported in every applications we want. After the import statement we can use all the variables the less file contains.

NPM package

Publish the LESS file into as an npm package so that file can be imported as a dependency in every application you need (npm install or yarn add).

I'm using the first approach to start. If someone else will have some different ideas you are welcome!