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

我正在尝试在作为代理（proxyPass）的Apache vhost后面设置一个Web应用程序，以便添加contextPath。当然，只有虚拟主机必须知道这个contextPath。WebPack + SASS：如何生成相对图像路径？

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

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

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

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

注：

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

的WebPack 3
节点萨斯4.5.3
青菜装载机6.0.6
提取物，文本的WebPack-插件3.0.0

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

来源

2017-09-14 user2668735

解决的办法是在css-loader（请参阅css-loader documentation）中将url选项设置为false。此外，只要我们在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-14 18:47:43 user2668735

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

回答

相关问题