javascript - 使用 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 />

实际问题:

我对这种方法很满意，但我必须获取其中一个 svgs 作为背景图像，所以在 _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'
  },
}

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