前端踩坑日记-sass-resources-loader在Windows上遇到的问题

这几天在给应届生启动项目时,在团队其他人,包括自己在内,启动都是没问题的,唯独应届生启动时总会报下面一个错误

js 复制代码
      Did you forget to resolve this to an absolute path with path.resolve?

在构建时我们是引用了sass-resources-loader处理了scss全局变量给其他的scss文件使用

看到错误的第一反应是框架层面关于sass全局变量的构建失败,便翻了框架的构建产物,发现实际上对应的地址是能找到资源的。但是在构建时,就是会报找不到的错误。 但是奇怪的是只有应届生会失败,唯一的区别便是我们是mac而应届生是windows系统

系统之间存在差异。关于文件找不到最大的差异便是windows的路径与mac的路径使用的斜杠是不同的。

同时也发现在json中有人刻意给glob包升级了版本

sass-resources-loader本身用的是7.x的glob版本 去除该引用包后,一切就正常了,windows上路径全都读取的到 同时在网上也发现了,将Windows的//处理一下文件路径的引用

js 复制代码
// 获取 Windows 中的路径
const pathWithBackslashes = path.join(__dirname, '../src/pages/*/index.js');

// 使用正则表达式替换反斜杠
const pathWithSlashes = pathWithBackslashes.replace(/\\/ig, '/');

也是能正常使用

因此记录一下踩坑日记,

在Windows上遇到路径异常,处理一下关于文件斜杠的问题,不清楚为何glob的8.x版本并未对路径有相关额外处理。但在下次遇到类似时,可以分析下关于不同系统文件路径的处理,有些写法在mac上或者linux上是正常,而在Windows就不一定了

相关推荐
仿生狮子1 小时前
别再说“全栈”了,AI 时代团队只认这 5 种人
前端·人工智能·后端
kyriewen1 小时前
AI 写的 React 组件,合并前必查的 6 个坏味道——每个都有代码对比
前端·javascript·react.js
Highcharts.js1 小时前
软件开发公司为什么选择 Highcharts?
前端·前端框架·echarts·数据可视化·技术选型·highcharts·图表工具
阿祖zu2 小时前
企业 AI 转型之痛,个人提效十倍不止,组织效率仍止步不前?
前端·aigc·agent
摇滚侠3 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
Hilaku4 小时前
前端大裁员背后的恐慌:我们还剩什么底牌?
前端·javascript·程序员
咖啡无伴侣4 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员4 小时前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端
明月_清风4 小时前
SEO 完全指南:从底层原理到实战应用场景
前端·seo
默_笙5 小时前
🚲 手写一个"Claude Code":我用 LangChain + ReAct 循环,让 AI 自己读文件、解释代码
前端·javascript