使用 Webpack 和 svgr 加载器在 .scss 中加载 SVG

Question

网络包配置：

1. 对于.svg我使用的配置：{ test: /\.svg$/, use: ['svgr/webpack'] }
2. 对于.scss我使用css-loader,postcss-loader和sass-loader

文件夹结构：

我的文件夹结构如下所示：

- App
-- styles
--- globals.scss // Here I import my partials
--- partials
---- _my_partial.scss
-- icons
--- svgs
---- my_icon.svg

svgr 加载器：

我喜欢svgr loader它，因为它允许我只导入我的图标并将其用作 React 组件：

import MyIcon from './icons/svgs/my_icon.svg';
...
<MyIcon />

实际问题：

我对这种方法很好，但我必须将其中一个 svgs 作为background-image，所以_my_partial.scss我在里面写道：

background-image: url(../icons/svgs/my_icon.svg);

我在这个文件夹中只有一个文件夹，url因为当向上两个时，它抱怨它无法解决它 - 我想这是因为我在我的globals.scss.

通过这个设置，我在浏览器中得到的只是：

GET http://localhost:3005/[object%20Module] 404 (Not Found)

Answer 1

svgr/webpack将您的 svg 转换为 react 组件，因此当将 svg 用于 scss 时，它实际上是一个对象/react 组件。更改svgr/webpack为file-loader以使用它。如果您仍然想同​​时使用两者，您可以尝试以下操作：

{ test: /\.react.svg$/, use: ['svgr/webpack'] }
{ test: /\.svg$/, use: ['file-loader'] }

然后将您想要作为 React 组件的所有 svg 重命名为文件名.react.svg，其余的只保留 .svg。

不过我还没有测试过:)

更新：查看文档（部分：在 CSS、Sass 或 Less 中处理 SVG），似乎您可以将 svgr/webpack 与文件加载器一起使用：

https://github.com/smooth-code/svgr/tree/master/packages/webpack

{
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: {
      test: /\.jsx?$/
    },
    use: ['babel-loader', '@svgr/webpack', 'url-loader']
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader'
  },
}

无论哪种方式，您可能都需要进行一些更改以满足您的需求，但它支持它:)