webpack中的scss定义样式不起作用？
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样式什么的怎么没用？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
请问解决了吗~