代码之家 › 专栏 › 技术社区 › mdmb

使用Webpack和SVgr加载器在.scss中加载SVG

sass webpack svg reactjs javascript

mdmb · 技术社区 · 6 年前

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 因为它允许我导入图标并将其用作反应组件:

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)

1 回复 | 直到 6 年前

Arber Sylejmani 6 年前

svgr/webpack 将SVG转换为React组件,因此当将SVG用于SCSS时,它实际上是一个对象/反应组件。变化 SVGR/WebPACK 到 file-loader 为了使用它。如果您仍想同时使用这两种方法,可以尝试如下操作:

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

然后将所有要作为反应组件的SVG重命名为 文件名 .react.svg,剩下的就交给.svg。

不过,我还没有测试过:)

更新 :查看文档(部分: 在CSS、Sass或更低版本中处理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'
  },
}

不管怎样,您可能需要做一些更改以满足您的需要,但它支持它:)

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前