Webpack and react recognize css class names

Question

I have a React component that I am trying to import css.

import './Example.css';

class Example extends Component {
  return <div className="example-class">Example</div>
}

My file structure is as follows

build
  -index.js
src
  -index.js
  -Example.css

My webpack.config.jslooks as follows.

Currently everything is building, but css doesn't seem to fit.

Can anyone see what I need to do to access my classes after assembly?

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
    },
    {
      test: /\.css$/,
      use: [ 'css-loader' ]
    }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

Answer 1

css-loaderIt only handles CSS, but does not make it accessible in the browser. You can use one style-loaderfor this, which injects CSS into the tag <style>. (see also CSS loading )

{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
}

- CSS extract-text-webpack-plugin. CSS .css JavaScript. CSS HTML.

Answer 2

:

import styles from './Example.css';

class Example extends Component {
  return <div className={styles.example-class}>Example</div>
}