Tilde in url with css modules does not work

Question

Do you have some example config that works?

setting for webpack:

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

Usage:

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

Output:

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

I can omit ~ or use ~/../assets and it works , but I would like to use it just ~.

• Probably relevant bug: CSS modules break build if used with ~ https://github.com/webpack-contrib/css-loader/issues/589

Answer 1

I just copy your comment in order that you may close this question

the problem is that css-modules mode changes path resolution and doesn't respect webpack module resolution