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

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

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

.hello {

  color: $primary-color;

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

}

编译之后的：

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

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

解决方式一：

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

这样做有一个问题就是：

$\color{red}{项目中所有被引用的静态资源，都会受控为止（都会加上 ‘../’）。}$

解决方式二：

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

这样问题就解决了

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