WebPack + SASS : 如何生成相对图像路径？

Question

我正在尝试在充当代理 (proxyPass) 的 Apache 虚拟主机后面设置一个 Web 应用程序，以便添加上下文路径。当然只有 vhost 必须知道这个 contextPath。

一切正常，除了未加载的背景图像。原因很简单：

SASS 图片 URL 是绝对的，不包含上下文路径。

如果最终 CSS 中生成的 URL 是相对的，则应该正确加载图像。

如何使用SASS/Webpack生成相对路径？

备注：

无论我在 SASS 文件中使用什么，绝对或相对路径，最终输出总是绝对的。我目前使用：

Webpack 3
节点-sass 4.5.3
sass-加载程序 6.0.6
extract-text-webpack-plugin 3.0.0

我不使用任何文件加载器（我也尝试过但什么也没改变），只是复制 dist 目录中的所有图像。

Answer 1

解决方案是在 css-loader 中将 url 选项设置为 false（参见 css-loader documentation）。此外，一旦我们在 SASS 源中使用相对路径，我们也需要一个文件加载器，如果我们使用已经负责将这些文件复制到 dist 目录中的 CopyWebpackPlugin，则将 emitFile 设置为 false。

      {
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: { url: false }
          }, {
            loader: 'sass-loader'
          }]
        })
      }, {
        test: /\.(png|svg)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'file-loader?name=img/[name].[ext]',
          options: {
            emitFile: false
          }
        }]
      }

WebPack + SASS : 如何生成相对图像路径？

WebPack + SASS : How to generate relative image path?

sass

relative-path

sass-loader

extracttextwebpackplugin

webpack-3