weex 中的 style scoped

更新日期: 2017-06-01 阅读次数: 4947 分类: 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

爱评论不评论

近期节日

2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
2020年09月10日 教师节
2020年09月16日 国际臭氧层保护日
2020年09月16日 世界清洁地球日
2020年09月18日 "九一八"事变纪念日
2020年09月20日 国际爱牙日
查看更多节日