質問編集履歴

2 補足追加

YoshitomoYasuno

YoshitomoYasuno score 6

2017/04/09 18:05  投稿

webpackでcss-moduleがうまく動作しない
アプリの構成
app
|-dist
|   |-index.html
|
|-src
| |-components
| |     |-Search.js
| |-css
| | |searchStyles.css
| |-index.js
| |-index.css
|
|-webpack.config.js
|-package.json
webpack.config.js
```webpack.config.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']
         }
       }
     ]
   },
   devServer: {
     contentBase: 'dist'
   },
   devtool: 'source-map',
   resolve: {
     extensions: ['.js', '.jsx']
   }
 },
 {
   context: path.join(__dirname, 'src'),
   entry: {
     bundle: './index.css'
   },
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].css'
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
             {
               loader: 'css-loader',
               options: {
                 modules: true,
                 importLoaders: 1,
                 sourceMap: true,
                 localIdentName: '[path][name]__[local]--[hash:base64:5]'
               }
             }
           ]
         })
       }
     ]
   },
   devtool: 'source-map',
   plugins: [
     new ExtractTextPlugin('[name].css')
   ]
 }
]
```
Search.js
```Search.js
import React, { Component } from 'react'
import 'whatwg-fetch'
import Webcam from 'react-webcam'
import RaisedButton from 'material-ui/RaisedButton'
import { browserHistory } from 'react-router';
import styles from 'style-loader!css-loader!../css/searchStyle.css'
const Header = new Headers();
Header.append("Content-Type", "image/jpeg");
console.log(styles.)
class Search extends Component {
 constructor(props) {
   super(props);
     this.state = {
       screenshot: null
     }
 }
 tapSearching() {
   let screenShot = this.refs.webcam.getScreenshot();
   this.setState({ screenshot: screenShot });
   this.fetchEmotion(screenShot);
 }
 fetchEmotion(screenshot) {
   fetch('url', {
     method: 'POST',
     headers: Headers,
     body: screenshot
   }).then(res => {
     console.log(res);
   }).catch(res => {
     console.log(res);
   })
 }
 render() {
   return(
     <div className={styles.searchContainer}>
       <Webcam
         ref="webcam"
         audio={false}
         screenshotFormat="image/jpeg"
       /><br />
       <RaisedButton
         label="Search"
         onTouchTap={() => this.tapSearching()}
       />
     {this.state.screenshot ? <img src={this.state.screenshot} /> : null}
     </div>
   )
 }
}
export default Search
```
searchStyles.css
```searchStyles.css
.searchContainer {
 width: 100%;
 height: 100%;
 background-color: blue;
}
.webcam {
 display: inline-block;
 textAlign: center;
}
```
このときconsole.log(styles)はObject
console.log(styles.searchContainer)はundefinedです
bundle.cssを見たところsearchStyle.cssがoutputされていませんでした  
 
css-modulesでスタイルを当てられるようにするにはどうすればいいでしょうか
  • JavaScript

    30902 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    2601 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    576 questions

1 ファイル名追加

YoshitomoYasuno

YoshitomoYasuno score 6

2017/04/09 17:58  投稿

webpackでcss-moduleがうまく動作しない
アプリの構成
app
|-dist
|   |-index.html
|
|-src
| |-components
| |     |-Search.js
| |-css
| | |searchStyles.css
| |-index.js
| |-index.css
|
|-webpack.config.js
|-package.json
 
webpack.config.js  
```webpack.config.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']
         }
       }
     ]
   },
   devServer: {
     contentBase: 'dist'
   },
   devtool: 'source-map',
   resolve: {
     extensions: ['.js', '.jsx']
   }
 },
 {
   context: path.join(__dirname, 'src'),
   entry: {
     bundle: './index.css'
   },
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].css'
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
             {
               loader: 'css-loader',
               options: {
                 modules: true,
                 importLoaders: 1,
                 sourceMap: true,
                 localIdentName: '[path][name]__[local]--[hash:base64:5]'
               }
             }
           ]
         })
       }
     ]
   },
   devtool: 'source-map',
   plugins: [
     new ExtractTextPlugin('[name].css')
   ]
 }
]
```
Search.js  
 
```Search.js
import React, { Component } from 'react'
import 'whatwg-fetch'
import Webcam from 'react-webcam'
import RaisedButton from 'material-ui/RaisedButton'
import { browserHistory } from 'react-router';
import styles from 'style-loader!css-loader!../css/searchStyle.css'
const Header = new Headers();
Header.append("Content-Type", "image/jpeg");
console.log(styles.)
class Search extends Component {
 constructor(props) {
   super(props);
     this.state = {
       screenshot: null
     }
 }
 tapSearching() {
   let screenShot = this.refs.webcam.getScreenshot();
   this.setState({ screenshot: screenShot });
   this.fetchEmotion(screenShot);
 }
 fetchEmotion(screenshot) {
   fetch('url', {
     method: 'POST',
     headers: Headers,
     body: screenshot
   }).then(res => {
     console.log(res);
   }).catch(res => {
     console.log(res);
   })
 }
 render() {
   return(
     <div className={styles.searchContainer}>
       <Webcam
         ref="webcam"
         audio={false}
         screenshotFormat="image/jpeg"
       /><br />
       <RaisedButton
         label="Search"
         onTouchTap={() => this.tapSearching()}
       />
     {this.state.screenshot ? <img src={this.state.screenshot} /> : null}
     </div>
   )
 }
}
export default Search
```
searchStyles.css  
 
```searchStyles.css
.searchContainer {
 width: 100%;
 height: 100%;
 background-color: blue;
}
.webcam {
 display: inline-block;
 textAlign: center;
}
```
このときconsole.log(styles)はObject
console.log(styles.searchContainer)はundefinedです
css-modulesでスタイルを当てられるようにするにはどうすればいいでしょうか
  • JavaScript

    30902 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    2601 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    576 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る