webpackと反応して、CSSクラス名を認識させよう

Question

私はcssをインポートしようとしているReactコンポーネントを持っています。

import './Example.css'; 

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

マイファイル構造は次のようになります。この

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

マイwebpack.config.jsのように見えます。

現在のところ、すべてがビルドされていますが、cssが選択されていないようです。

誰もビルド後に自分のクラス名にアクセスするために何をする必要がありますか？

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-loaderはCSSを処理しますが、ブラウザでそれを利用可能にしません。これにstyle-loaderを使用すると、<style>タグにCSSが挿入されます。

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

別の可能性は、extract-text-webpack-pluginでCSSを抽出することである（またLoading CSS参照）。 JavaScriptバンドルに加えて、CSSを抽出して.cssファイルを作成します。 HTMLにCSSを含めることができます。

Answer 2

あなたはこれを試すことができます。

import styles from './Example.css'; 

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