Как обойти загрузчик файлов?

Question

В моем webpack.config.js У меня есть это:

module: {
    loaders: [
      {
        test: /\.css$/,
        include: APP_DIR,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.scss$/,
        include: APP_DIR,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'babel-loader!react-svg-loader',
      },
    ],
  },

Который я использую для импорта некоторых SVG-файлов непосредственно в Компоненты.

Однако теперь я хочу показать svg-файл, который находится в моей папке React App только через scss. Но babel-loader!react-svg-loader препятствует этому. Я загружаю scss через React.

Это:

background-image: url('../assets/icons/pattern/size_35.svg');

Становится

background-image: url([object Object]);

Я могу сделать это, но это кажется хакерским:

background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');

Насколько я понимаю, для этого случая у меня не должно быть никакого загрузчика файлов, но поскольку он у меня уже есть, он мешает этому работать.

Я хочу разрешить относительный URL из приложения React. Так что это:

background-image: url('../assets/icons/pattern/size_35.svg');

становится этим

background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');

во внешнем интерфейсе.

Answer 1

Если вы хотите обойти свой react-svg-loader только один раз, вы можете написать встроенные загрузчики:

background-image: url('!!file-loader!../assets/icons/pattern/size_35.svg');

Если это будет обычное явление, вы можете использовать resourceQuery для svgs, которые вы хотите рассматривать как файлы:

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /file/, // size_35.svg?file
      use: 'file-loader'
    },
    {
      use: 'babel-loader!react-svg-loader'
    }
  ]
}