CODEWITHSUNDEEP
csswebpack
Saralyn
Saralyn

Reputation: 313

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?

Upvotes: 2

Views: 232

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

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 }>

Upvotes: 1

Related Questions