javascript - 如何绕过文件加载器？

Question

在我的 webpack.config.js 我有这个:

module: {
    loaders: [
      {
        test: /\.css$/,
        include: APP_DIR,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.scss$/,
        include: APP_DIR,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'babel-loader!react-svg-loader',
      },
    ],
  },

我用它直接在组件中导入一些 svg 文件。

但是现在我只想通过 scss 显示驻留在我的 React App 文件夹中的 svg 文件。但是 babel-loader!react-svg-loader 阻止了它的发生。我正在通过 React 加载 scss。

这个:

background-image: url('../assets/icons/pattern/size_35.svg');

成为

background-image: url([object Object]);

我可以这样做，但感觉很老套:

background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');

根据我的理解，对于这种情况，我不应该有任何文件加载器，但因为我已经有一个它阻止了它的工作。

不过，我确实想解析来自 React 应用程序的相对 URL。这样:

background-image: url('../assets/icons/pattern/size_35.svg');

变成这样

background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');

在前端。

Answer 1

如果你只想绕过你的react-svg-loader一次，你可以编写内联加载器:

background-image: url('!!file-loader!../assets/icons/pattern/size_35.svg');

如果这很常见，您可以使用 resourceQuery对于您想作为文件处理的 svg:

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /file/, // size_35.svg?file
      use: 'file-loader'
    },
    {
      use: 'babel-loader!react-svg-loader'
    }
  ]
}