@svgr/webpack配合CSS背景图失效问题求助

问题原因 #

你当前的Webpack配置中，当从.jsx/.tsx文件导入SVG时，会触发svgReactComponentRule，将SVG编译为React组件。因此import Logo from '@images/logo.svg'得到的是React组件，而非图片URL。当你把组件传入CSS的url()中时，浏览器无法识别该内容，会直接忽略整个background属性，表现为属性被移除。

解决方案 #

方案1：同时导出组件与URL #

修改@svgr/webpack配置，开启命名导出，同时输出React组件和图片URL：

export const svgReactComponentRule = {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.[jt]sx$/,
    use: [
        babelLoader,
        {
            loader: '@svgr/webpack',
            options: {
                babel: false,
                icon: true,
                exportType: 'named', // 启用命名导出
                ref: true
            }
        }
    ]
}

导入时分别获取组件和URL：

import { ReactComponent as Logo, url as logoUrl } from '@images/logo.svg';

使用方式：

// JSX中用组件
<Logo />

// CSS中用URL
export const LogoWrapper = styled.div`
    display: block;
    height: 100px;
    width: 100%;
    background: url(${logoUrl}) no-repeat center / cover;
`

方案2：强制按资源导入（临时方案） #

无需修改Webpack配置，使用inline loader语法强制将SVG作为资源处理：

import logoUrl from '!!asset/inline!@images/logo.svg';

直接在CSS中使用logoUrl即可，该方式会生成SVG的base64格式URL。

方案3：拆分导入规则 #

新增一条Webpack规则，匹配带?url参数的SVG导入，强制按资源处理：

export const svgUrlRule = {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    resourceQuery: /url/, // 匹配带?url后缀的导入
    type: 'asset/inline'
}

// 将新规则放在最前面
export const svgRules = [svgUrlRule, svgReactComponentRule, svgRule]

导入时通过后缀区分：

import Logo from '@images/logo.svg'; // 获取React组件
import logoUrl from '@images/logo.svg?url'; // 获取图片URL

内容的提问来源于stack exchange，提问作者Álvaro