weex 中的 style scoped

在 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式