Webpack 1 + sass (in react) - 别管我的图片

Question

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

我有包含所有图像和其他资产文件夹的图像文件夹。

我不希望 webpack 对图像做任何事情，我希望它们在运行时由 url 加载。我通过在 jsx 代码中使用图像 urls 内联（而不是导入它们）在 JSX 中解决了这个问题，并且效果很好。

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

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

谢谢

Answer 1

一种可能性是将 url option of the css-loader 设置为 false，这样 webpack 就不会触及 url。 .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 (in react) - 别管我的图片

Webpack 1 + sass (in react) - leave my images alone

reactjs

webpack

sass-loader