Question

我在Sact的React.js中有一个项目并使用Webpack 1。

我有包含所有图片和其他资源的图片文件夹。文件夹。

我不希望webpack对图像做任何事情，我希望它们在运行时由url加载。我在JSX中通过在jsx代码中使用内联的图像URL来解决它（而不是导入它们）并且它工作得很好。

但是当我试图在SASS中做同样的事情时，它会有所不同：我曾经在绝对传递/images/abc.png中引用它们并且它有效。我甚至没有为他们安装webpack加载器，它只是起作用。但是我不得不将它改为相对路径../../www/images/abc.png并且它们全部崩溃了：它拒绝在没有webpack加载器的情况下工作 - 只是为每个图像提供错误。我尝试过使用文件加载器，但它将所有使用过的图像复制到build文件夹中。我尝试过使用url-loader，但它只是将图像包含在生成的css文件中，这使得它非常臃肿。

那么，我可以使用什么来忽略来自sass的图像并在运行时通过url解决它们？

由于

Answer 1

一种可能性是将url option of the css-loader设置为false，因此webpack不会触及网址。您对.scss的规则可能看起来像这样（假设您使用extract-text-webpack-plugin）：

Webpack 1：

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?url=false!sass-loader')
},

Webpack 2：

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { url: false } },
      { loader: 'sass-loader' }
    ]
  })
}

但这忽略了所有网址而不仅仅是你的图片。如果这是一个问题，您可以将file-loader与emitFile: false选项一起使用，这样就无法复制您的文件。但是，您需要一些解决方法才能获得正确的路径。在名称中使用[path]时，它将使用context中的相对路径。由于您要将其构建到目录（例如build/），因此您需要通过设置../选项上一个目录（publicPath）。哪个会给你以下规则：

Webpack 1：

{
  test: /\.png/,
  loader: 'file-loader?emitFile=false&name=[path][name].[ext]&publicPath=../'
},

Webpack 2：

{
  test: /\.png/,
  loader: 'file-loader',
  options: {
    emitFile: false,
    name: '[path][name].[ext]',
    publicPath: '../'
  }
}

如果您在webpack配置中设置了context，或者您的输出CSS文件在构建目录中超过了一个级别，那么您需要调整publicPath选项

Webpack 1 + sass（做出反应） - 单独保留我的图像

1 个答案: