如何绕过文件加载器？

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'
    }
  ]
}