Блог

Я пытаюсь импортировать svg как компонент в jsx и, как обычно, в scss. Но получите другое поведение. вот моя следующая конфигурация.

       {
        test: /.svg(?v=d .d .d )?$/,
        issuer: {
          test: /.(js|ts)x?$/,
        },
        use: [
          'babel-loader',
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                pretty: true,
                multipass: true,
                plugins: [
                  { sortAttrs: true },
                  { removeDimensions: true },
                  { removeStyleElement: true },
                  { removeAttrs: { attrs: '(xmlns.*)' } },
                ],
              },
              semi: false,
              singleQuote: true,
              icon: true,
            },
          },

          'url-loader',
        ],
      },
      {
        test: /.svg(?v=d .d .d )?$/,
        loader: 'url-loader',
      },
    );

    return config;
 

background-image: url('../../public/img/mail.svg');

результат css содержимого svg

Как вы можете видеть, я использую эмитент, чтобы обнаружить, что svg импортируется из jsx, и это не работает. И я не могу понять, почему.