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>

作為前端，這樣子臣妾做不到

筆者更希望能跟熟悉的味道一樣

• 使用任意選擇器，元素選擇器、組合選擇器；
• 使用繼承；

像這樣

<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>

味道還是熟悉的好，可是該怎麼做呢？

幸好，weex提供的weex-loader支援webpack打包，於是並有了編寫weex-style-loader的想法

將我們平常編寫的 style 轉換成single class selecor style，這樣就可以愉快地開發weex了

使用

安裝loader

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

配合weex-tookit腳手架，在webpack中新增loader

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

讓我們看看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>

展望

在此基礎上，類似vue支援<style lang="less"></style>，就可以使用less、sass前處理器了
敬請期待