Nuxt项目如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

接上篇《Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith》
如果Vue项目考虑实现SSR服务端渲染的话,Nuxt是很好的选择,Nuxt帮我们做了很多工作,让我们实现SSR就像配置一样简单。

还是同样的问题,如果需要在Nuxt项目开发过程中整合重构流程该怎么做?

如何使用Sass

跟 Sass 有关的就两个东西,sass-loadernode-sass ,所以我们安装这两个东西,然后在组件中就可以用Sass来写了。

npm install -D sass-loader node-sass

如何整合 postcss-px2rem

如果是移动端项目,基本都会用到 rem 单位,如果我们写了 px 就需要转换一下。当然这和项目采用的适配方案有关,我们目前采用的是 vw+rem 的适配方案。通过给根元素 html 设置 font-size ,用 vw 作单位,其他元素用 rem 作单位,实现自适应。具体适配方案可以看:《移动Web开发基础-利用VW单位适配布局》

现在我们在 Nuxt 构建的项目中如何配置呢?

  1. 适配方案需如上所说,其他方案自行类比。
  2. 安装 npm install postcss-loader
  3. 配置 nuxt.cofig.js
build: {
	postcss: [
	     require('postcss-px2rem')({
	     	remUnit: 100
	     })
	]
}

如何使用 webpack-spritesmith

  1. 安装 npm install --save-dev webpack-spritesmith
  2. assets>img 目录下新建 spr 文件夹,里面放需要合并雪碧图的素材,合并之后会生成一张雪碧图和一个样式文件。
  3. nuxt.cofig.js webpack 扩展配置
build: {
    extend(config, ctx) {
      //如果是开发环境而且在客户端中执行
      if (ctx.isDev && ctx.isClient) {
        // 雪碧图插件
        let path = require('path');
        let SpritesmithPlugin = require('webpack-spritesmith');
        // 雪碧图处理模板
        let templateFunction = function (data) {
          let shared = '.icon { display:inline-block; background-image: url(I); background-size:WSMpx HSMpx; }'
              .replace('I', data.sprites[0].image)
              .replace('WSM', data.spritesheet.width)
              .replace('HSM', data.spritesheet.height);
  
          let perSprite = data.sprites.map(function (sprite) {
              return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
                  .replace('N', sprite.name)
                  .replace('W', sprite.width)
                  .replace('H', sprite.height)
                  .replace('X', sprite.offset_x)
                  .replace('Y', sprite.offset_y);
          }).join('\n');
  
          return shared + '\n' + perSprite;
        };
        // 雪碧图扩展webpack配置
        config.resolve.modules.push('./assets/img');  //css在哪里能找到sprite图
        config.plugins.push(
          new SpritesmithPlugin({
              src: {
                  cwd: path.resolve(__dirname, './assets/img/spr/'), // 图标根路径
                  glob: '**/*.png' // 匹配任意 png 图标
              },
              target: {
                  image: path.resolve(__dirname, './assets/img/spr.png'), // 生成雪碧图目标路径与名称
                  // 设置生成CSS背景及其定位的文件或方式
                  css: [
                      [path.resolve(__dirname, './assets/scss/spr.scss'), {
                          format: 'function_based_template'
                      }]
                  ]
              },
              customTemplates: {
                  'function_based_template': templateFunction,
              },
              apiOptions: {
                  cssImageRef: "~assets/img/spr.png", // css文件中引用雪碧图的相对位置路径配置
              },
              spritesmithOptions: {
                  padding: 10,
              }
          })
        )
      }
    }
  }

说明:

  1. 雪碧图样式处理模板函数里面可以定义样式的输出格式,这里我是统一类名 icon ,某个图标对应的类名 icon-图片名
  2. 在配置文件里可以设置输出的路径和文件命名,这里我是命名 spr.pngspr.scss
  3. 目前有一个问题是,当 spr 文件夹下没有需要合并的雪碧图是,编译会报错,同时生成一个无效的图片,我尝试在配置文件里加条件判断,但是一直不成功,希望有大佬看到能帮忙解答下,感谢。
  4. 生成的样式文件如下:
.icon { display:inline-block; background-image: url(~spr.png); background-size:584px 497px; }
.icon-que01 { width: 174px; height: 156px; background-position: 0px 0px; }
.icon-que02 { width: 129px; height: 159px; background-position: -356px -100px; }
.icon-que03 { width: 162px; height: 162px; background-position: 0px -166px; }
  1. 使用 <i class="icon icon-que01"></i>
  2. spritesmithOptions 是设置图片之间的间距(留白),避免rem适配带来的计算误差问题。

总结

至此,我们就可以愉快的重构了,直接在vue组件中写结构和样式。同时,作为一个前端开发,也可以同时把逻辑体现在数据结构和HTML结构上了。开心ing~~

END.

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值