Saralyn Saralyn - 1 year ago 126
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 className='four columns'>
<Editor />

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

Answer Source

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


For example, to use "class" row:

<div className={ styles.row }>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download