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

我用来直接在Components中导入一些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 App解析相对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');

如果这是常见的情况，则可以对要当作文件的svg使用resourceQuery：

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

如何规避文件加载器？

1 个答案: