fex-team / fis

Front-end Integrated Solution - 前端集成解决方案, 最新版请进入 FIS3 https://github.com/fex-team/fis3
http://fis.baidu.com
MIT License
2.96k stars 654 forks source link

【新手】 fis3 使用sprite功能失败 #691

Closed ghost closed 7 years ago

ghost commented 8 years ago

使用官方文档配置 spirte可以生成 但在css中并未引用

fis.config.set('modules.spriter', 'csssprites');

fis.match('*.{js,css,png}', { useHash: true });

fis.match('::package', { spriter: fis.plugin('csssprites') });

fis.match('*.css', { useSprite: true });

fis.match('*.js', { optimizer: fis.plugin('uglify-js') });

fis.match('*.css', { optimizer: fis.plugin('clean-css') });

fis.match('*.png', { optimizer: fis.plugin('png-compressor') });

ghost commented 8 years ago

取消了css内嵌(?__inline)就可以引用了 但是 backgournd-size , backgorund-positon不能识别 css代码如下:

sideBar .sideContent>a:nth-child(1){

background: url("../img/icon/music.png?__sprite") no-repeat center 15px;
background-size: 36px 36px;

} 解析为 background-position: 0px 0px; background-size: 36px 270px; 不知道为什么会这样 求解答

oxUnd commented 8 years ago

第一,inline 了之后,就没办法找到具体的 css 做处理了。 第二,background-position 不支持 center 这种标记

详细请看 csssprite 文档

ghost commented 8 years ago

那为什么 background-size属性解析失败呢?