2

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

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

SASS 图像 URL 是绝对的，不包含 contextPath。

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

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

笔记：

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

  • 网络包 3
  • 节点萨斯 4.5.3
  • 萨斯加载器 6.0.6
  • 提取文本 webpack 插件 3.0.0

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

4

1 回答 1

3

解决方案是在 css-loader 中将url 选项设置为 false（请参阅css-loader 文档）。此外，一旦我们在 SASS 源中使用相对路径，我们也需要一个文件加载器，如果我们使用 CopyWebpackPlugin 已经负责将这些文件复制到 dist 目录中，则 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
          }
        }]
      }
于 2017-09-14T18:47:43.973 回答