nuxt2 中 postcss-pxtorem 失效问题

问题展示

本地的运行环境没有出现postcss-pxtorem的失效问题，本地项目中的px -> rem正常。

.join-us-email[data-v-2e5a7539] {
  font-size: 1.66667rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.38889rem;
}

在线上环境中，打包后的包当中px -> rem失效。

.join-us-email[data-v-2e5a7539] {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 25px;
}

本地环境复现

在我们的项目中的jenkins种的流水的命令如下。所以根据如下的命令行的分析来看可能是由于postcss的版本问题。于是运行下面的命令，在本地进行重现看下是否会出现线上的问题。

rm -rf package-lock.json
rm -rf node_modules
npm cache clean --force
npm install --unsafe-perm
npm run generate

在执行上述的命令之后，果然出现了上面的问题。px -> rem失效，并且伴有如下报错：

 WARN  [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
​
 WARN  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

从上面来看有两个错误：

::v-deep的写法不兼容，需要改成:deep(<inner-selector>)写法，这个与postcss的关系不大。看了下跟@vue/compiler-sfc的包有关系。
这个错误从字面来看是PostCSS does nothing.。那肯定是由于postcss的版本不对导致的。

解决postcss的问题

排查

通过查阅postcss的版本，目前最高的版本是 8.x，而之前项目中使用的是 7.x 的版本。

解决

直接安装如下依赖

npm install postcss@7.0.39 -D

结果

按照jenkins的命令行执行的到如下结果

打包出来的文件能够正常 px -> rem

.join-us-email[data-v-2e5a7539] {
  font-size: 1.66667rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.38889rem;
}

命令行中只剩下::v-deep的报错

WARN  [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

解决::v-deep的问题
排查
从上面的报错来看@vue/compiler-sfc是跟vue@2.7.x是相关的，所以我这里通过如下的命令先查看本地安装的vue版本来进行排查：

npm ls vue // 查本地安装的 vue 的版本
// 运行后得到如下的信息：
xxx-official-web@1.0.0 /Users/xxx/Desktop/code/xxx/official-website // 这里的目录做了马赛克处理
├─┬ fullpage-nuxt@0.0.3
│ └─┬ fullpage-vue@1.9.1
│   └── vue@2.7.7 
└─┬ nuxt@2.15.8
  ├─┬ @nuxt/vue-app@2.15.8
  │ └── vue@2.7.7  deduped
  └─┬ @nuxt/vue-renderer@2.15.8
    └── vue@2.7.7  deduped

npm ls @vue/compiler-sfc // 查本地安装的 @vue/compiler-sfc 的版本
​
// 运行后得到如下的信息：
xxx-official-web@1.0.0 /Users/xxx/Desktop/code/xxx/official-website // 这里的目录做了马赛克处理
└─┬ fullpage-nuxt@0.0.3
  └─┬ fullpage-vue@1.9.1
    └─┬ vue@2.7.7
      └── @vue/compiler-sfc@2.7.7 

根据上面的信息我们可以看到vue已经升级到了2.7.7。根据同事的说法是，2.7.7是可以直接使用vue3的composition的写法，并且自己安装了@vue/compiler-sfc进行解析相关的语法。（我自己没有认真去查阅过相关的文档）

解决

所以为了解决这里的问题，我采取了直接降级到vue@2.6.14的方法。具体操作如下:

安装相关依赖

npm install vue@2.6.14 vue-template-compiler@2.6.14 vue-server-renderer@2.6.14 -S

我这里是 nuxt 项目，所以需要添加 vue-server-renderer。

package.json中对版本号进行调整

{
  "dependencies": {
      ...
    -  "vue": "^2.6.14",
    +  "vue": "~2.6.14",
    -  "vue-server-renderer": "^2.6.14",
    +  "vue-server-renderer": "~2.6.14",
    -  "vue-template-compiler": "^2.6.14"
    +  "vue-template-compiler": "~2.6.14"
  },
  "devDependencies": {
    "postcss": "^7.0.39"
  }
}

结果

按照jenkins的命令行执行的到如下结果
::v-deep的报错消失了。

查看两个的版本：

npm ls vue

// 运行后得到如下的信息
xxx-official-web@1.0.0 /Users/xxx/Desktop/code/xxx/official-website
├─┬ fullpage-nuxt@0.0.3
│ └─┬ fullpage-vue@1.9.1
│   └── vue@2.6.14  deduped
├─┬ nuxt@2.15.8
│ ├─┬ @nuxt/vue-app@2.15.8
│ │ └── vue@2.6.14  deduped
│ └─┬ @nuxt/vue-renderer@2.15.8
│   └── vue@2.6.14  deduped
└── vue@2.6.14 

npm ls @vue/compiler-sfc 
// 运行的到如下结果：
xxx-official-web@1.0.0 /Users/xxx/Desktop/code/xxx/official-website
└── (empty)

项目正常运行

最后的一个大胆想法

我在解决的时候在想，这个postcss不生效会不会是由于@vue/compiler-sfc的解析所导致的。所以就进行了一个猜想，如果这时候package.json中不定义postcss@7.0.39能够正常运行？所以我就进行了最后一个步骤的尝试：

解决

package.json 调整：不做 postcss 降级处理。

{
  "dependencies": {
      ...
     "vue": "~2.6.14",
     "vue-server-renderer": "~2.6.14",
     "vue-template-compiler": "~2.6.14"
  },
  "devDependencies": {
  -  "postcss": "^7.0.39"
  }
}

结果

按照jenkins的命令行执行的到如下结果

项目正常运行

总结

所以postcss-pxtorem的问题是由于vue的版本升级到2.7.x所导致的。进行相对应的降级处理就行。