Тильда в url с модулями css не работает

У вас есть пример конфигурации, который работает?

для webpack:

{
  test: /\.scss$/,
  use: ['style-loader', {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[local]--[hash:base64:5]',
    },
  }, 'sass-loader'],
},

Использование:

background: url('~assets/arrow-white.svg') center no-repeat;

Вывод:

Module not found: Error: Can't resolve './assets/arrow-white.svg'

Я могу опустить ~ или использовать ~/../assets, и он работает, но я хотел бы использовать его просто ~.

Вероятно, соответствующая ошибка: модули CSS ломаются, если используются с ~ https://github.com/webpack-contrib/css-loader/issues/589

Ответ 1

Используйте этот пакет https://github.com/P0lip/url-tilde-loader

// In your webpack config
{
  test: /\.s?css$/,
  use: [
    'style-loader',
    {
      loader: "css-loader",
      options: {
        modules: true,
      },
    },
    {
      loader: 'url-tilde-loader'
      options: {
        replacement: '~/../', // string to replace with
        traverse: false, // use manual traversing
      },
    },
  ]
}

Ответ 2

Я просто копирую ваш комментарий, чтобы закрыть этот вопрос

проблема в том, что режим css-modules изменяет разрешение пути и не учитывает разрешение модуля webpack