Saralyn Saralyn - 11 days ago 7
CSS Question

Webpack css/style loader unresponsive for classes and ids

I have been trying to learn webpack. I'm running into issues with loading CSS as modules. When I use a css page, the program has no problem reading the tags, but for some reason will not read the classes or ids. ie -

body {
color: red; //works
}

.row {
background-color: green; //does not work
}


My loaders are setup like this:

{
test: /\.css/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}


And my import looks like this:

import styles from './css/main.css';


I am also working with react jsx files, if that makes any difference. My jsx looks like this:

<div className="row">
<div className="eight columns">
<DOMviewer />
</div>
<div className='four columns'>
<Editor />
</div>
</div>


How can I get the loaders to read the ids and classes?

Answer

Instead of using the string "row" as a string, use it as property on the styles object, because the actual class name will be created by the loader, and will include a random hash because of this definition (this creates the module's namespace):

'[name]__[local]___[hash:base64:5]'

For example, to use "class" row:

<div className={ styles.row }>
Comments