vue vue-cli postcss-sprites 配置
钱天兵 人气:0vue-cli2.x创建完项目
- 安装postcss-sprites
yarn add postcss-sprites -D
-
根目录配置postcss.config.js
配置中,需要注意,
1:当有用pxtorem 或者 pxtoviewport等像素转换的时候,需要把postcss-sprites的参数放在前面,这样生成后的雪碧图定位才会被后面的plugins转换。
2:spritePath不需要制定到编译后的dist目录中,因为dist里最终会通过webpack的file-loader生成一个带hash的图片过去module.exports = { plugins: { 'postcss-sprites': { spritePath: './src/assets/', verbose: true, // image的路径或者名字中含有sprite关键词的进行合并,否则不合并 filterBy (image) { if (/-sprite\./.test(image.url)) { return Promise.resolve() } // eslint-disable-next-line prefer-promise-reject-errors return Promise.reject() }, // 雪碧图分组,当图片较多的时候使用,通过判断路径和名字中的关键词,resolve不同的名字,reject的为默认名字 groupBy (image) { if (/-page1/.test(image.url)) { return Promise.resolve('page1') } if (/-page2/.test(image.url)) { return Promise.resolve('page2') } // eslint-disable-next-line prefer-promise-reject-errors return Promise.reject() } }, 'postcss-px-to-viewport': { viewportWidth: 1660, unitPrecision: 3, selectorBlackList: ['van'] } } }
加载全部内容