Javascript 使用Webpack和svgr加载程序在.scss中加载SVG

网页包配置：

对于

.svg

我使用config:

{test://\.svg$/，使用：['svgr/webpack']}

对于

.scss

我使用

css加载器

，

postss加载器

和

sass加载器

文件夹结构：

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

- 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 />

---

我在这个

url

中只打开了一个文件夹，因为当我打开两个文件夹时，它抱怨它无法解决它-我想这是因为我在我的

globals.scss

中导入了我的分区

通过此设置，我在浏览器中得到的全部信息是：

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

---

svgr/webpack

将svg转换为react组件，因此在将svg用于SCS时，它实际上是一个对象/react组件。将

svgr/webpack

更改为

file loader

，以便使用它。如果您想同时使用这两种方法，可以尝试以下方法：

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

然后将所有作为React组件的svg重命名为filename.React.svg，其余的只剩下.svg

我还没有测试过：）

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

---

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

“我在这个

url

中只打开了一个文件夹，因为当我打开两个文件夹时，它抱怨无法解决它”。在打开两个文件夹时，您是如何编写导入的？我的意思是，当我编写路径

。/../icons/svgs/my_icon.svg

时，它抱怨无法解决它。当我写

。/icons/svgs/my_icon.svg

时，这不是一个很好的解决方法，但当需要在组件和css中使用相同的svg时，我必须在两个版本中使用相同的文件。我更新了答案，您现在可以将其作为文件和同一文件中的组件导入：）非常感谢！我没有读到文档的结尾：（那

issuer

config使它工作了！

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

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