{ test: /\.css?$/, loader: ‘style-loader!css-loader?&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader’ }
Aurelia + Webpack + PostCSS + CSSnext + CSS Modules + pushState + IIS, Oh My!
Nathan Chase
134

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 :)

Like what you read? Give Sayan Pal a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.