Style编译配置

Style编译配置使用boi.specAPI：

boi.spec('style',<options>);

第一个参数代表需要配置的模块，Style对应value为style。

options包括以下可配置项：

• ext：String，源文件扩展类型，默认为css。boi会根据ext类型自动分配对应的编译方案。boi默认支持以下预编译方案：
  • css
  • less
  • scss

其他与编译方案请自行编写boi插件实现。

• source：String，style源文件的二级目录名称，相对于[basic](config.basic.md).source。默认为style；

• output：String，编译输出style文件的二级目录名称，相对于[basic](config.basic.md).output。默认为style；

• mainFilePrefix：String，style主文件的命名前缀，默认为main。也就是说，默认的style主文件名为main.[name].[extType]；

• useHash：Boolean，编译输出的css文件名是否加上hash指纹，默认为true。也就是说，默认的编译输出js文件名为main.[name].[hash].css;

• autoprefix：Boolean，是否自动补全前缀，默认为false。

  目前webpack针对style文件的编译工具，如果使用自动补全，会引起一些中间版本浏览器无法兼容的问题。比如，flex布局在IOS8的Safari下的写法应该是display:-webkit-box-flex，而大多数编译工具的自动补全会将其修复为display: -webkit-flex。所以，我们推荐不使用编译工具的自动补全功能，而是由开发人员编写mixin实现hack兼容性。

• sprites：Boolean|Object，配置CSS Sprites自动生成功能。取值为false时关闭此功能；取值为Object时有以下子配置项：

  • source：String，指定散列图标的目录。取值可以是必须是项目目录内的路径，比如./assets/icons。也可以是文件夹的名称，比如icons。生成的Sprites图片输出的目录是image模块指定的output;
  • split：Boolean，是否根据子目录分别编译输出。如果配置sprites.split为true，boi会根据子目录将散列图标单独打包；
  • retina：Boolean，是否识别多分辨率标识并生成多分辨率sprites图片。如果设置为true，boi可识别以@2x后缀命名的图片并单独打包。更多细节请参考postcss-sprite文档；
  • postcssSpritesOpts：Object，boi的自动生成sprites图片功能由postcss-sprite实现，此配置可以允许你直接配置。

  关于css sprites的实现方案可以参考这篇文章boi剖析 - 基于webpack的css sprites实现方案。