使用Webpack在单独的css文件中编译scss，同时保留图像的原始URL

Question

我已经学会了如何使用文件Webpack在JavaScript中包含scss文件，但现在我想从scss生成一个css文件。我正在使用ExtractTextPlugin执行此操作，我可以生成一个css文件，但问题是在我的scss文件中，我正在设置一些背景图像，如：

   background: url("../img/test.jpg") no-repeat center center;

现在，我意识到当提取到一个单独的css文件时，图像被合并到该文件中，不同图像的大小从6 kb增加到400 kb，因此我无法快速加载样式。

我想忽略在生成的css文件中包含图像，只是保留它们的URL，以便可以像通常从css文件那样请求它们。我已经阅读了一些与此相关的文章，但我仍然无法弄明白。

我正在使用的装载机是：

{
   test: /\.css$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader")
 },
 {
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract('style', 'css!sass')
 },
 {
   test: /\.(png|jpg)$/,
   loader: "url-loader"
 },

非常感谢！

Answer 1

我可以弄清楚如何解决问题，我们只需要使用文件加载器而不是url-loader并设置上下文：

{{1}}

通过上下文查询，所有url路径都保持原样。