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 聊聊， 查看更多联系方式