weex 中的 style scoped

更新日期: 2017-06-01 阅读次数: 7576 分类: weex

在 weex 的文档中经常会看到这样的示例代码

<style scoped>
  .text {
    width: 750px;
    height: 90px;
  }
</style>

这个 scoped 是做什么用的?

这是 scoped css。即,当 style 标签包含 scoped 属性时,其 css 样式只对当前组件有效。而不包含 scoped 属性的 style 标签,则是全局的。

同一组件内,可以同时包含全局 style 和 local style。即

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

vue-loader

这个特性是 vue-loader 引入的。vue-loader 是 webpack 的一个组件加载器。

打开 weex 项目的 package.json 可以看到 devDependencies 中包含 vue-loader 10.0.2.

vue-loader 支持一些神奇的特性

  • 上面说到的 scoped CSS
  • html 模板支持 jade
  • css 支持 less/sass
  • 支持 ES2015

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式