webpackでcss-moduleがうまく動作しない

アプリの構成

webpack.config.js

webpack.config.js
1const webpack = require('webpack')
2const path = require('path')
3const ExtractTextPlugin = require('extract-text-webpack-plugin')
4
5module.exports = [
6  {
7    context: path.join(__dirname, 'src'),
8    entry: {
9      bundle: './index.js'
10    },
11    output: {
12      path: path.join(__dirname, 'dist'),
13      filename: '[name].js'
14    },
15    module: {
16      rules: [
17        {
18          loader: 'babel-loader',
19          test: /\.js[x]?$/,
20          exclude: /node_modules/,
21          options: {
22            presets: ['es2015', 'react']
23          }
24        }
25      ]
26    },
27    devServer: {
28      contentBase: 'dist'
29    },
30    devtool: 'source-map',
31    resolve: {
32      extensions: ['.js', '.jsx']
33    }
34  },
35  {
36    context: path.join(__dirname, 'src'),
37    entry: {
38      bundle: './index.css'
39    },
40    output: {
41      path: path.join(__dirname, 'dist'),
42      filename: '[name].css'
43    },
44    module: {
45      rules: [
46        {
47          test: /\.css$/,
48          loader: ExtractTextPlugin.extract({
49            fallback: 'style-loader',
50            use: [
51              {
52                loader: 'css-loader',
53                options: {
54                  modules: true,
55                  importLoaders: 1,
56                  sourceMap: true,
57                  localIdentName: '[path][name]__[local]--[hash:base64:5]'
58                }
59              }
60            ]
61          })
62        }
63      ]
64    },
65    devtool: 'source-map',
66    plugins: [
67      new ExtractTextPlugin('[name].css')
68    ]
69  }
70]

Search.js

Search.js
1import React, { Component } from 'react'
2import 'whatwg-fetch'
3import Webcam from 'react-webcam'
4import RaisedButton from 'material-ui/RaisedButton'
5import { browserHistory } from 'react-router';
6import styles from 'style-loader!css-loader!../css/searchStyle.css'
7const Header = new Headers();
8Header.append("Content-Type", "image/jpeg");
9console.log(styles.)
10class Search extends Component {
11  constructor(props) {
12    super(props);
13      this.state = {
14        screenshot: null
15      }
16  }
17  tapSearching() {
18    let screenShot = this.refs.webcam.getScreenshot();
19    this.setState({ screenshot: screenShot });
20    this.fetchEmotion(screenShot);
21  }
22  fetchEmotion(screenshot) {
23    fetch('url', {
24      method: 'POST',
25      headers: Headers,
26      body: screenshot
27    }).then(res => {
28      console.log(res);
29    }).catch(res => {
30      console.log(res);
31    })
32  }
33  render() {
34    return(
35      <div className={styles.searchContainer}>
36        <Webcam
37          ref="webcam"
38          audio={false}
39          screenshotFormat="image/jpeg"
40        /><br />
41        <RaisedButton
42          label="Search"
43          onTouchTap={() => this.tapSearching()}
44        />
45      {this.state.screenshot ? <img src={this.state.screenshot} /> : null}
46      </div>
47    )
48  }
49}
50export default Search

searchStyles.css

searchStyles.css
1.searchContainer {
2  width: 100%;
3  height: 100%;
4  background-color: blue;
5}
6.webcam {
7  display: inline-block;
8  textAlign: center;
9}

このときconsole.log(styles)はObject
console.log(styles.searchContainer)はundefinedです
bundle.cssを見たところsearchStyle.cssがoutputされていませんでした

css-modulesでスタイルを当てられるようにするにはどうすればいいでしょうか

行動規範の内容に同意します

回答1件

自己解決

単純に書き方を間違えていました。

module.exports = [
{},{}
]
とcss部分とjs部分の設定を分けるのではなく一つにすることで解決しました。
コードは下記のような感じです。

const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: {
      bundle: './index.js'
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          loader: 'babel-loader',
          test: /\.js[x]?$/,
          exclude: /node_modules/,
          options: {
            presets: ['es2015', 'react']
          }
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                  importLoaders: 1,
                  sourceMap: true
                }
              }
            ]
          })
        }
      ]
    },
    devServer: {
      contentBase: 'dist'
    },
    plugins: [
      new ExtractTextPlugin('[name].css')
    ],
    devtool: 'source-map',
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }

投稿2017/04/09 22:08

YoshitomoYasuno

総合スコア6