技术控

    今日:48| 主题:49369
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 小白学react之SASS实战

[复制链接]
马蚁族 发表于 2016-10-3 12:52:58
160 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生。作为行业内人士,我们很应该去拥抱这个趋势。其中Reactjs相信是开发webapp的佼佼者,这段时间将会通过改造官方实例alt-tutorial来学习Reactjs相关的知识。
   上一篇《 小白学react之restful api获取服务器数据实战 》我们学习了如何通过superagent的两个模块提供的功能,调用远程Express服务器上通过restful api提供的数据,并且学习了如何打造一个简单的Express api服务器。
  今天本人准备将我们的示例应用alt-tutorial加上css的支持,以便能更好的呈现。以下是最终效果:
   
小白学react之SASS实战-1 (业内人士,服务器,佼佼者,珠海,开发)

   本篇开始之前,如果看官跟我一样对SASS没有怎么接触过的,敬请先去看下阮一峰的《 SASS用法指南 》,有个基本概念,我们再进行实战。
  1. SASS Loader 和 sourceMap特性

   像我们系列的第二篇《 小白学react之webpack实战 》中所描述,为了能让我们的webpack在打包的时候可以正确解析到jsx格式的文件,我们需要加入bable这个loader的支持。同样,这里我们为了让webpack在打包时能正确解析到scss,我们也需要加上相应的loaders。
  我们打开webpack.config.js,在loaders代码块里面加入以下代码:
  [code]{
    test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}[/code]  这里style,css和sass这几个loader的功能都比较直观,我们知道"?sourceMap"这个语法的意思是开启对应模块的sourceMap属性,那么这个sourceMap又是干什么用的呢?
  其实这里主要的目的就是方便我们调试sass代码。因为sass代码最终还是要编译成css的,而我们在调试的时候,我们更愿意在Chrome的开发者工具中能够直接看到我们的sass代码来进行调试。我们要知道,sass的代码在编译成css后,变化可能会比较大的。
  比如我们将要说到的Home页面的scss代码:
  [code].home {
    &__li {

        list-style: none;
        height: rem(60px);
        vertical-align: middle;
        float:left;
        padding-right: rem(60px);

        &:hover { background: #31b0d5;
        }

    }
}[/code]  在编译之后就会变成:
  [code].home__li {
  list-style: none;
  height: 1.5rem;
  vertical-align: middle;
  float: left;
  padding-right: 1.5rem; }
  .home__li:hover {
    background: #31b0d5; }[/code]  我们可以看到两者肯定是有区别的了。那如果我们在相应的loader中没有开启sourceMap的特性的话,我们在chrome的开发者工具中看到的将会是这个样子的:

小白学react之SASS实战-2 (业内人士,服务器,佼佼者,珠海,开发)

  可以看到我们是没有办法看到我们的sass源码的。
  如果我们将对应的loaders的sourceMap特性启动起来,那么我们在通过chrome的开发者工具进行调试的时候将会看到的是这样的:
更多图片 小图 大图
组图打开中,请稍候......
友荐云推荐




上一篇:Happy Study Linux 1
下一篇:Advanced KPI Configurations in SQL Server Reporting Services 2016
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

翠梅 发表于 2016-10-3 17:43:19
替楼主问候看帖不回帖的!
回复 支持 反对

使用道具 举报

yafeng 发表于 2016-10-28 07:49:28
yafeng就喜欢这种人少的贴子,沉了感觉是我弄沉的,火了就占了前排,说不准还遇到好心人把我给粉了 稳赚不赔啊!
回复 支持 反对

使用道具 举报

me11 发表于 2016-11-11 13:29:01
佩服佩服!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表