weex-style-loader: 给你熟悉的style开发体验

使用weex开发了两个项目，感受到了其跨平台动态性的强大；另一最直接的感受就是，作为一名前端，不能像平常那样编写css ，要不定义内联style，要不定义single-class selector，绞尽脑汁去给每个标签起className

像这样

<style>
  .mod-app-entry {
    ...
  }
  .entry-item {
    ...
  }
  .entry-img {
    ...
  }
  .entry-txt {
    ...
  }
</style>
<template>
  <div class="mod-app-entry">
    <a class="entry-item" repeat="{{list}}" href="{{jumpUrl}}">
      <image class="entry-img" src="{{imgUrl}}"></image>
      <text class="entry-txt">{{title}}</text>
    </a>
  </div>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

作为前端，这样子臣妾做不到

笔者更希望能跟熟悉的味道一样

• 使用任意选择器，元素选择器、组合选择器；
• 使用继承；

像这样

<style>
  .mod-app-entry {
    /*定义全局样式*/
    color: #999;
    font-size: 24;
  }
  a {
    ...
  }
  image {
    ...
  }
  .mod-app-entry text {
    /*覆盖color:#999，继承font-size:24*/
    color: #f00;
    text-align: center;
  }
</style>
<template>
  <div class="mod-app-entry">
    <a repeat="{{item in list}}" href="{{item.pluginUrl}}">
      <image src="{{item.imgUrl}}"></image>
      <text>{{item.title}}</text>
    </a>
  </div>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

味道还是熟悉的好，可是该怎么做呢？

幸好，weex提供的weex-loader支持webpack打包，于是并有了编写weex-style-loader的想法

将我们平常编写的 style 转换成single class selecor style，这样就可以愉快地开发weex了

使用

安装loader

tnpm install @ali/weex-style-loader --save-dev

        

          
        
        
        

          

          AI 代码解读
        
      
      

配合weex-tookit脚手架，在webpack中添加loader

loaders: [
  {
    test: /\.we(\?[^?]+)?$/,
    loaders: ['weex-loader', '@ali/weex-style-loader']
  }
]

        

          
        
        
        

          

          AI 代码解读
        
      
      

让我们看看weex-style-loader转换后的代码是否符合大爷的需求

<style>
.mod-app-entry {
  color: #999;
  font-size: 24;
}
.weex-element-increment-1 {
  ...
}
.weex-element-increment-2 {
  ...
}
.weex-element-increment-3 {
  text-align: center;
  color: #f00;
  font-size: 24;
}
</style>
<template>
  <div class="mod-app-entry">
    <a repeat="{{item in list}}" href="{{item.pluginUrl}}" class="weex-element-increment-1">
      <image src="{{item.imgUrl}}" class="weex-element-increment-2"></image>
      <text class="weex-element-increment-3">{{item.title}}</text>
    </a>
  </div>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

展望

在此基础上，类似vue支持<style lang="less"></style>，就可以使用less、sass预处理器了
敬请期待