https://github.com/hideoo/less-variables-demo

Sharing Less variables to JavaScript
https://github.com/hideoo/less-variables-demo

css javascript less loader webpack

Last synced: about 1 month ago
JSON representation

Sharing Less variables to JavaScript

• Host: GitHub
• URL: https://github.com/hideoo/less-variables-demo
• Owner: HiDeoo
• Created: 2018-02-06T15:02:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-06T15:22:52.000Z (almost 7 years ago)
• Last Synced: 2024-10-09T00:44:13.977Z (4 months ago)
• Topics: css, javascript, less, loader, webpack
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# less-variables-demo

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.

## Installation

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.

## Details

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](https://github.com/css-modules/icss) 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.