enable css modules

build/cssScoopeGenerator.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = function() {
+  const index = {};
+  const componentNames = {};
+  
+  return function (localName, resourcePath) {
+    let id = index[resourcePath];
+    if (id === undefined) {
+      id = getComponentName(resourcePath);
+      index[resourcePath] = id;
+    }
+    if (localName === 'root') {
+      localName = '';
+    }  else {
+      localName = '-' + localName
+    }
+    return 'x-' + id + localName;
+  };
+
+  function getComponentName(resourcePath) {
+    let filename = path.basename(resourcePath);
+    let name = path.parse(filename).name;
+    let suffix = '';
+    let collisionCounter = 0;    
+    while (componentNames[name + suffix] !== undefined) {
+      suffix = collisionCounter ++;
+    }
+    name = name + suffix;
+    componentNames[name] = true;
+    return name;
+  }
+};
+

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const generateCSSScopedName = require('./build/cssScoopeGenerator')();
 
 const WEB_APP = path.join(__dirname, 'web/app');
 const MODULES = path.join(__dirname, 'modules');
@@ -43,7 +44,14 @@ module.exports = {
       test: /\.less$/,
       use: [
         'style-loader',
-        'css-loader?-url',
+        {
+          loader: 'css-loader',
+          options: {
+            getLocalIdent: (context, localIdentName, localName) => generateCSSScopedName(localName, context.resourcePath),
+            modules: true,
+            url: false
+          }
+        },
         'less-loader'
       ]    
     },