WebPack Sass:如何生成相对图像路径

Question

我正在尝试在Apache VHOST背后设置Web应用程序，该应用程序充当代理（ProxyPass），以添加ContectPath。当然，只有VHOST必须知道此上下文路径。

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

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

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

如何使用sass/webpack来生成相对路径？

---

注意：

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

• WebPack 3
• 节点sass 4.5.3
• sass-loader 6.0.6
• 提取 - text-webpack-plugin 3.0.0

我不使用任何文件加载程序（我也尝试过，但什么也没有更改），只需复制Dist目录中的所有图像。

Answer 1

解决方案是将 URL选项设置为false 在CSS-LOADER中（请参阅CSS-LOADER DOMISTER）。此外，一旦我们在SASS源中使用相对路径，我们也需要一个文件加载程序，如果我们使用CopyWebpackPlugin，则emitfile to false，他们已经负责将这些文件复制到Dist Directory中。

。

      {
        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
          }
        }]
      }