webpack中的scss定义样式不起作用？

Question

webpack中的scss定义样式不起作用？

云流

113

发布于
2016-12-24

更新于
2016-12-24

新手上路，请多包涵

scss定义的样式只对html，以及index.html中的content起作用，而使用jsx的标签比如.img-sec没有效果？

scss文件：

  width:100%;
  height:100%;
  background-color:#222;
}

.content{
  width:100%;
  height:100%;
}

/* stage -- start*/
.stage{
  position:relative;

  width:100%;
  height:680px;
}

/*stage -- end*/

/*image -- start*/
.img-sec{
  position:relative;

  width:100%;
  height:100%;
  overflow:hidden;

  background-color:#ddd;
}

/*image -- end*/

/*controller -- start*/
.controller-nav{
  position:absolute;
  left:0;
  bottom:30px;
  z-index:101;

  width:100%;
  text-align:center;

  width:200px;
  height:200px;
  background-color:red;

  
}

main.js:

require('styles/App.scss');

import React from 'react';

//获取图片数据
var imageDatas=require('../data/imageDatas.json')

//将图片信息转换为路径
function genImageURL(imgArr){
    for(var i=0,j=imgArr.length;i<j;i++){
        var single=imgArr[i];

        single.imageURL=require('../images/'+single.fileName);

        imgArr[i]=single;
    }
    return imgArr;
}

imageDatas=genImageURL(imageDatas);

//let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  render() {
    return (
        <section className="stage">
            <section className="img-sec">
            </section>
            <nav className="controller-nav"> 
            </nav>
        </section>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>React Webpack Template Title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <div id="content" class="content">APPLICATION CONTENT</div>

  <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
  <script type="text/javascript" src="/assets/app.js"></script>
</body>
</html>

最后监听的页面：只有scss中html与content的样式有了，那我定义的img-sec样式什么的怎么没用？
图片描述