javascript - 使用Webpack和svgr loader在.scss中加载SVG

Webpack配置:

对于.svg，我使用配置:{ test: /\.svg$/, use: ['svgr/webpack'] }

对于.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)

最佳答案

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。

我还没有测试过:)

UPDATE :查看文档(部分:在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'
  },
}

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