解决 extract-text-webpack-plugin 分离 css 与 file-loader 处理图片时,路径不对的问题

在使用 extract-text-webpack-plugin 分离 css 时,指定一个输出目录:


当我们在使用 file-loader 处理图片时:

我们在样式中这样引入背景图片:

.hello {

  color: $primary-color;

  background: url('../img/1.jpg');

}

编译之后的:


编译之后我们再去运行我们的项目就会发现背景图片找不到的问题:

出现这种问题是因为 webpack 编译之后的路径都是相对路径,而我们之前在分离 css 的时候将其放在了一个 css 文件夹下面,而将图片放在了 img 文件夹下面。


解决方式一:

在 webpack.config.js 文件中加上:

这样做有一个问题就是:

    项目中所有被引用的静态资源,都会受控为止(都会加上 ‘../’)。


解决方式二:

我们在需要的模块中去处理:

这样问题就解决了。


随手笔记,感谢阅读,不对之处请指教,谢谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容