Question

Webpack配置：

对于.svg，我使用config：{ 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)

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或更少的语言处理SVG ），似乎可以将svgr / webpack与文件加载器一起使用：< / p>

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

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

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

1 个答案: