vue vue-cli postcss-sprites 配置

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