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

Question

Webpack 配置：

1. 对于.svg，我使用 config:{ 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 />

实际问题：

我对这种方法很好，但我必须将其中一个 svg 作为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 转换为反应组件，因此当将 svg 用于 scss 时，它实际上是一个对象/反应组件。将 svgr/webpack 更改为 file-loader 以使用它。如果您仍想同时使用这两种方法，可以尝试以下方法：

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

然后将您想要作为 React 组件的所有 svg 重命名为 filename.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'
  },
}

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