using a CSS module 'scope' with less and webpack's css loader

myview.js

'use strict';

var styles = require('./styles.less');
// styles => { 'scope': 'oasduf98aus9df8ja9s8d' }


// this view uses the given scope as its classname
// so buttons in my view will be gold and green
// the color of buttons outside my view will not be affected
module.exports = Marionette.LayoutView.extend({
  
  className: styles.scope,
  
  template: require('./template.html'),
  
});

// this is a Marionette example, but the same idea
// could be used with any view framework (or with vanilla JS)

styles.less

// :local is a CSS module convention 
// this will export an object with a `scope` property
// the value will be a unique classname to be used in my view
:local(.scope) {
  
  .button.confirm {
    background-color: gold;
  }
  
  .button.cancel {
    background-color: green;
  }

}

template.html

<p>Do you want to save your changes?</p>

<div class="button confirm">Save</div>
<div class="button cancel">Cancel</div>