zoukankan      html  css  js  c++  java
  • 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']
          }
        }
      }
  • 相关阅读:
    【Alpha】测试报告
    【Alpha】发布说明
    【Alpha】项目展示
    【Alpha】Scrum Meeting 10
    【Alpha】Scrum Meeting 9
    【Alpha】Scrum Meeting 8
    “北航Clubs”功能规格说明书
    后端技术规格说明书
    前端设计说明书
    Daily Scrumming* 2015.11.3(Day 15)
  • 原文地址:https://www.cnblogs.com/wshiqtb/p/14241034.html
Copyright © 2011-2022 走看看