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

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

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

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

.hello {

  color: $primary-color;

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

}
复制代码

编译以后的:web

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

出现这种问题是由于 webpack 编译以后的路径都是相对路径,而咱们以前在分离 css 的时候又其放在了一个 css 文件夹下面,而图片️放在了 img 文件夹下面。url


解决方式一:

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

这样作有一个问题就是:code

\color{red}{项目中全部被引用的静态资源,都会受控为止(都会加上 ‘../’)。}


解决方式二:

咱们在须要的模块中去处理:cdn

这样问题就解决了blog



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

相关文章
相关标签/搜索