使用Webpack和svgr loader在.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僅是一個文件夾，而在該url中只有兩個，它抱怨它無法解決-我猜這是因為我將我的globals.scss導入了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'] }

然后將所需的所有svg作為React組件重命名為文件名 .react.svg，其余的僅保留.svg。

我還沒有測試過:)

更新 ：查看文檔（部分： 使用CSS，Sass或更少的CSS處理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'
  },
}

無論哪種方式，您都可能需要進行一些更改以適應您的需求，但它支持它:)