微信小程序开发入门与实践
上QQ阅读APP看书,第一时间看更新

5.6 CSS的模块化

在之前的几个小节里,已经成功地将wxml代码做成了模板。既然是模板,就应该有模板的样式。我们当然可以维持现在的代码不做改变,因为现在整个项目运行正常,但这样并不合理。样式同样应该作为模板的一部分被“打包”起来。

将post.wxss中同文章相关的样式(所有以post-开头的样式)全部剪切到post-item-tpl.wxss文件中,post.wxss文件只留下swiper组件相关的样式。

保存运行,发现post页面的样式乱掉了。

在定义了postItemTpl后,我们需要在post.wxml中引用它。同样,当定义了模板的wxss文件后,也需要在post.wxss文件中引用它。

引用样式文件的语法是@import "src"。在post.wxss文件的顶部添加如下代码:

在引入CSS文件时,既可以是以上代码中所使用的相对路径,也可以是绝对路径。保存后,文章列表的样式恢复正常。