A demo on how to share Less variables to JavaScript in a Webpack environment using CSS Modules without using any external module or modifying any configuration.

Resolving variables is also not an issue when using this method.

Clone the repository and install the demo dependencies using

yarn install

Build the demo:

yarn run build

Open the dist/index.html file in your browser (you don't even have to serve it).

Resize your browser window.

The setup assume you're using a combination of Webpack loaders including less-loader, style-loader and css-loader (with the modules option set to true to enable CSS Modules).

When CSS Modules are enabled, we can use the ICSS (Interoperable CSS) superset which allow us to take advantage of the additional :export pseudo-selector.

Every symbols in this pseudo-selector are going to be exported to the consumer. This is the equivalent of module.exports in JavaScript.