"Unresolved variable" when using className={styles.nameOfClass} - css

Question

I am attempting to change a button's style in ReactJS with the "className" element. However, I get back an error stating "Unresolved variable nameOfClass" in WebStorm, and the stylistic changes are not made when I run webpack and open the page on localhost. I have attempted different methods of importing the CSS file and naming conventions to no avail.
The file with the React Component class is here:
import * as React from "react";
var styles = require('./Roster.css');
export class Roster extends React.Component<{},{}> {
render() {
return (
<div>
<button className={styles.nameOfClass} type="button" >Players</button>
</div>
);
}
}
And the Roster.css file is here:
.nameOfClass {
background-color: #ff0000;
}
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
externals: ['axios'],
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
}
],
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
new ExtractTextPlugin('styles.css', { allChunks: true })
],
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};

Answer 1

You don't have to require the styles file.
import * as React from "react";
export class Roster extends React.Component<{},{}> {
render() {
return (
<div>
<button className="nameOfClass" type="button" >Players</button>
</div>
);
}
}
and your css file:
.nameOfClass {
background-color: #ff0000;
}

Answer 2

Should look something like:
import * as React from "react";
export class Roster extends React.Component<{},{}> {
render() {
return <div>
<button className="nameOfClass" type="button">Players</button>
</div>
}
}
You can't require css files, only typescript/javascript files.
There's the css-modules thing, and there are some js solutions for react/css, such as Radium and reactCss.