文档 / 组件开发

组件开发

如何在使用postcss插件

postcss插件是对前端css资源进行综合处理的插件，现阶段包含两个功能：

  1. 雪碧图处理
  2. 自动补全浏览器前缀

安装插件

light plugin -a postcss

配置启用

{
	"project":"$name$",
	"version":"$version$",
	"desc":"$desc$",
	"type":"light-1.0",
	"plugins":["postcss"]
}

编译代码

lighting版本大于等于1.2.6时：

light release -wb

lighting版本小于1.2.6时：

light release -e -wb

-wb选项代表，开启代码watch并且打开浏览器，并监听在3000（默认，可配置）端口。-e代表启用插件。

postcss配合less插件的使用方式

为了方便开发者使用less，lighting单独提供了less插件，那么如何在启用less插件的同时使用postcss插件呢？

首先，在配置文件中配置启用less插件：

{
	"project":"$name$",
	"version":"$version$",
	"desc":"$desc$",
	"type":"light-1.0",
	"plugins":["less","postcss"]
}

雪碧图

sprites(图片精灵，雪碧图)插件可以将样式背景图中大量散乱独立的图片进行整合拼接，在前端优化当中起到了减小页面的请求数以及提高页面加载效率的作用。

编译工具会自动处理依赖关系，在less插件完成之后进行资源的雪碧图处理。

该插件处理生成雪碧图有一下局限：

  1. 背景图片的大小必须和实际使用的大小一致，不能使用background-size设置背景大小
  2. 不支持对已经是雪碧图的雪碧图进行合并

自动添加浏览器前缀

a{
  display: flex;
}

处理后：

a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

重要提示：lighting版本必须大于1.2.6，postcss的插件的版本必须大于1.0.1可以使用此功能。