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所导致的。进行相对应的降级处理就行。
原文地址:https://www.jb51.cc/wenti/3279178.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。