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

     

     

版权声明：本文为wshiqtb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wshiqtb/p/14241034.html