Symfony 5.3环境下Twig模板无法加载node_modules目录资源如何解决

• Symfony的Web服务默认仅暴露public/目录下的资源，node_modules/存放在项目根目录，属于非公开的后端依赖目录，无法直接通过HTTP路径访问
• 没有原生支持直接访问node_modules/的asset类函数，直接对外开放node_modules/会暴露所有依赖源码，存在严重安全风险
• 你引入的是SCSS预处理器文件，浏览器本身不支持直接解析SCSS，就算能拿到文件也无法正常加载样式
• 原路径存在语法错误：node_modules和@fancyapps之间缺少斜杠，正确路径结构应为node_modules/@fancyapps/xxx

方案1：使用Webpack Encore（官方推荐，Symfony 5.3原生适配） #

Webpack Encore是Symfony官方封装的前端构建工具，默认支持读取node_modules依赖：

1. 在你的全局样式文件（如assets/styles/app.scss）中引入fancybox样式：

@import "~@fancyapps/ui/src/Fancybox/Fancybox.scss";

~前缀是Encore约定的自动定位node_modules目录的标识
2. 执行yarn encore dev或者npm run dev编译前端资源，编译后的文件会自动输出到public/build/目录
3. 在Twig模板中引入编译后的资源即可：

<link rel="stylesheet" href="{{ asset('build/app.css') }}">

方案2：无需构建工具的手动处理方案 #

如果不想用构建工具，可以手动提取需要的文件到公开目录：

1. 提前将node_modules/@fancyapps/ui/下需要用到的编译后CSS/JS文件复制到public/vendor/fancyapps/目录下
2. 在Twig中通过asset函数引入公开目录下的文件：

<link rel="stylesheet" href="{{ asset('vendor/fancyapps/Fancybox.css') }}">

注意：必须使用编译后的.css文件，不能直接引入.scss源文件

内容的提问来源于stack exchange，提问作者Jojo l'artichaut