我习惯把一个js模块和这个模块依赖的image和css都放到一个文件夹下，调用这个模块的时候再动态调用这个文件夹下的css文件,css文件用相对路径调用图片。
但是在项目合并打包的时候，我希望把所有模块所依赖的css文件都合并，导致css文件脱离了原来的文件结构，相对路径都不能用了。
如果给每一个css文件中的文件引用都改成绝对路径太麻烦了，移植性也不好，能不能有什么好的办法？
学习是最好的投资！
前段时间重构一个产品的时候，解决过这个问题，写了一个gulp的插件——gulp-css-rework-url。合并文件时候，做css路径替换，替换成绝对路径或url。也可以提取出css文件的中url()引用文件的路径，单独对文件处理。 github地址：https://github.com/itbeihe/gulp-css-rework-url 说到js模块，个人认为模块中除了js，css，静态资源外还包含html，处理方法写在github上了，感兴趣的可以看下。https://github.com/itbeihe/component-html-engine-demo
那些css和图片没必要和js模块放在同一个目录下，可以单独拆出去。因为他们是根据DOM里的class提供样式,其他没有调用这个js模块的页面也可以使用相应class产生样式。
我之前也遇到这个问题，解决办法就是写绝对路径，如果你为了保持模块独立可用性，可以考虑合并的时候写脚本做目录分析，然后替换css中的图片路径，我用的grunt做打包，用grunt做这些事情很方便，gulp也一样
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
前段时间重构一个产品的时候，解决过这个问题，写了一个gulp的插件——gulp-css-rework-url。合并文件时候，做css路径替换，替换成绝对路径或url。也可以提取出css文件的中url()引用文件的路径，单独对文件处理。
github地址：https://github.com/itbeihe/gulp-css-rework-url
说到js模块，个人认为模块中除了js，css，静态资源外还包含html，处理方法写在github上了，感兴趣的可以看下。
https://github.com/itbeihe/component-html-engine-demo
那些css和图片没必要和js模块放在同一个目录下，可以单独拆出去。因为他们是根据DOM里的class提供样式,其他没有调用这个js模块的页面也可以使用相应class产生样式。
我之前也遇到这个问题，解决办法就是写绝对路径，如果你为了保持模块独立可用性，可以考虑合并的时候写脚本做目录分析，然后替换css中的图片路径，我用的grunt做打包，用grunt做这些事情很方便，gulp也一样