Question

我正在尝试在Apache vhost后面设置一个Web应用程序，它充当代理（proxyPass）以添加contextPath。当然，只有vhost必须知道这个contextPath。

除了没有加载的背景图片外，一切都很好。原因很简单：

SASS图片网址是绝对的，不包含contextPath。

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

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

注意：

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

Webpack 3
node-sass 4.5.3
sass-loader 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：如何生成相对图像路径？

1 个答案: