webpack之postcss集成
前言
最近项目中在使用webpack,css是采用sass->postcss的结构, postcss 主要完成了下面几个功能
autoprefix,样式加前缀
preces
合并图片
1) 可以合并多张雪碧图 2) 可以按照不同的比例合并图片 3) 对一些简单的图片可以使用base64编码
兼容IE浏览器
后期需要将px转换为em,使用media-query做屏幕适配
其他功能都比较容易实现,现成的插件都能满足,合并图片现在使用的是sprites,有一些编码,在这里先贴出来
webpack.config.js
let postcssSprites = require('postcss-sprites'); let sprites = postcssSprites.default; let precss = require('precss'); let assets = require('postcss-assets'); let autoprefixer = require('autoprefixer');
{
postcss: [ autoprefixer, precss, assets({//主要是用来做base64编码的 basePath: __dirname + '/client', relative: false }) ] } //雪碧图相关代码 let spritesConfig = sprites({ retina: true,//支持retina,可以实现合并不同比例图片 verbose: true, spritePath: './public/images/',//雪碧图合并后存放地址 stylesheetPath: './public', basePath: './', filterBy: function (image) { //过滤一些不需要合并的图片,返回值是一个promise,默认有一个exist的filter // if (image.url.indexOf('/images/sprites/') === -1) { return Promise.reject(); } return Promise.resolve(); }, groupBy: function (image) { //将图片分组,可以实现按照文件夹生成雪碧图 return spritesGroupBy(image); }, hooks: { onUpdateRule: function (rule, comment, image) { //更新生成后的规则,这里主要是改变了生成后的url访问路径 return spritesOnUpdateRule(true, rule, comment, image); }, onSaveSpritesheet: function(opts, groups) { return spritesOnSaveSpritesheet(true, opts, groups); } } });
export function spritesGroupBy(image) {
let groups = /\/images\/sprites\/(.*?)\/.*/gi.exec(image.url); let groupName = groups ? groups[1] : group; image.retina = true; image.ratio = 1; if (groupName) { let ratio = /@(\d+)x$/gi.exec(groupName); if (ratio) { ratio = ratio[1]; while (ratio > 10) { ratio = ratio / 10; } image.ratio = ratio; } } return Promise.resolve(groupName); } export function spritesOnUpdateRule(isDev, rule, comment, image){ var spriteUrl = image.spriteUrl; image.spriteUrl = '/public/' + spriteUrl; postcssSprites.updateRule(rule, comment, image); } export function spritesOnSaveSpritesheet(isDev, opts, groups) { let file = postcssSprites.makeSpritesheetPath(opts, groups); return file; }
效果
--images --sprites --smiley@2x --smiley@3x 生成后的雪碧图[email protected],[email protected] 假设原图片64*64,项目中想使用的大小是32*32,就把原图片放在@2x的文件夹下面 相关sass代码如下 @for $i from 1 through 4 { .icon-smiley-#{$i} { width: 24px; height: 24px; background-image: url('/images/sprites/smiley@2x/smiley_#{$i}.png'); } } 编译后 .icon-smiley-0 { width: 24px; height: 24px; background-position: -24px -48px; background-image: url('/public/[email protected]'); }
遇到的一些坑
本来css不想使用sass的,存粹使用postcss,但是postcss不能检测内部文件的改动,导致webpack不能自动编译
比如我的主文件main.css里面 @import 'page.css' 这时候我修改page.css后,webpack不会自动编译 但是修改main.css,webpack可以自动编译, 网上找了一些资料,也没有最终解决问题,
其他坑还没碰到。。。
相关推荐
yezitoo 2020-07-08
dazhifu 2020-06-05
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18