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

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

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

如何使用Sass

跟 Sass 有关的就两个东西，sass-loader 和 node-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('