亲宝软件园·资讯

展开

vue vue-cli postcss-sprites 配置

钱天兵 人气:0

vue-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']
        }
      }
    }

     

     

加载全部内容

相关教程
猜你喜欢
用户评论