0

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

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

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

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

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

谢谢

4

1 回答 1

1

一种可能性是将url选项css-loader设置为 false，这样 webpack 就不会触及 url。您的规则.scss可能看起来像这样（假设您使用extract-text-webpack-plugin）：

网络包 1：

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

网络包 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选项上一个目录（ ）。这会给你以下规则：

网络包 1：

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

网络包 2：

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

如果您context在 webpack 配置中进行了设置，或者您的输出 CSS 文件在构建目录中的深度超过一级，则您需要调整该publicPath选项。

于 2017-03-10T02:47:36.173 回答