Thank you for the post.

Not sure if this too late, but sharing my findings, hoping that helps others. I was also looking to enable css-modules for my aurelia project and the part of the solution lies in this webpack config.

I did it a bit verbose way (easier for me to understand).

// a constant variable declaration
const cssRules = [
  {
    loader: 'css-loader',
    options: {
      modules: true, // We want to use css-modules!!
      importLoaders: 1, // Number of loaders applied before CSS loader. We want to use one loader (postcss-loader) before css-loader, hence 1
      localIdentName: "[name]__[local]___[hash:base64:5]"
    }
  },
  { 
    loader: 'postcss-loader',
    options: {
      plugins: () => [require('autoprefixer')({
        browsers: ['last 2 versions']
     })]
  }
]
// in webpack config
module:{
  rules:[
    {
      test: /\.css$/i,
      issuer: [{not: [{test: /\.html$/i}]}],
      use: ['style-loader', ...cssRules]
    }, ...
  ]
}

In webpack config we said that when ever .css is require d from non-html files we want to use our sequence of loaders.

From this the next part is pretty straightforward. Import your css in your view-model and use it in the view:

// view model
const styles = require("./nav-bar.css");
export class NavBarCustomElement {
public styles = styles;
}
// view
<img src="path/to/img.png" class.one-time="styles.imgBrand" />

Note the class name imgBrand . If you don’t like camelCasing for your css class name, and rather kebab-casing (img-brand ), then you need to use it as follows: class.one-time="styles['img-brand']" .

And that’s it :)