Webpack 5, css/sass loaders are ignoring tilde alias for root of the project

Question

I've recently updated webpack from 4->5 and its plugins/loaders as part of a tech debt upgrade for our project since its been quite a few years any upgrades have been made to it. One of the issues I've come across from this is that my resolve.alias seems to be ignoring ~ now which is causing most file paths and url() image resolutions to break:

alias: {
       '~': path.resolve(__dirname, 'src'),
       Lib: path.resolve(__dirname, '../../lib/node/src'),
       ROOT: path.resolve(__dirname, '../../')
}

Example in scss file:

background-image: url('~/assets/check-template.jpg');

Which leads to this error:

ERROR in ./apps/manager/src/scss/app.scss 
(./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./apps/manager/src/scss/app.scss) 
8:36-99
Module not found: Error: Can't resolve '/assets/check-template.jpg' in '/code/apps/manager/src/scss'

As you can see, this isn't the correct path since my assets are in src/assets. However, if I were to change the tilde to some name like SuperRoot, the error will resolve:

SuperRoot: path.resolve(__dirname, 'src'),

background-image: url('SuperRoot/assets/check-template.jpg');

Since I've done ~/ throughout a majority of the project for imports and other things, I would prefer to keep its original functionality as my src root. How do I retain it? I feel that this is a css-loader or sass-loader issue since I've had to upgrade these over several majors and I might have missed something while in the process.

My file structure:

src
  ┣ actions
  ┣ api
  ┣ assets
  ...

The rest of my webpack config:

module.exports = {
 devtool: 'source-map',
    entry: {
        app: path.resolve(__dirname, './src/index.js')
    },
    output: {
        filename: '[name].bundle.[fullhash].js',
        chunkFilename: '[name].bundle.[fullhash].js',
        path: path.resolve(__dirname, './../../bin/manager-app'),
        publicPath: '/'
    },
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src'),
            Lib: path.resolve(__dirname, '../../lib/node/src'),
            ROOT: path.resolve(__dirname, '../../')
        },
        modules: ['../node_modules/froala-editor/js', 'node_modules'],
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify')
        },
        extensions: ['.ts', '.js'],
        symlinks: false
    },
    plugins: [
        new Dotenv(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'XYZ',
            template: path.resolve(__dirname, './src/index.html')
        }),
        new WebpackManifestPlugin(),
        new webpack.DefinePlugin({
            CONFIG: {
                domain: JSON.stringify(serviceUrl),
                clientId: JSON.stringify(client_id),
                portalTypeId: JSON.stringify(1),
                apiRoot: JSON.stringify('/api/manager/'),
                loginUrl: JSON.stringify('session_manager_LoginUrl')
            }
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, './src/assets'),
                    to: 'assets'
                },
                {
                    
                    from: path.resolve(__dirname, './src/assets/favicon/favicon.ico'),
                    to: 'favicon.ico'
                }
            ]
        }),
        new webpack.ProvidePlugin({
            FroalaEditor: 'file_name'
        }),
        new CaseSensitivePathsPlugin()
    ],
     module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, './../../lib/node/src')],
                    use: 'babel-loader'
                },
                {
                    test: /\.ts?/,
                    exclude: /node_modules/,
                    include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, './../../lib/node/src')],
                    use: 'babel-loader'
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    include: path.resolve(__dirname, 'src'),
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader', // creates style nodes from JS strings
                        'css-loader', // translates CSS into CommonJS
                        'sass-loader' // compiles Sass to CSS, using Node Sass by default
                    ]
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    type: 'asset/resource'
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource'
                },
                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                    mimetype: 'application/font-woff',
                    type: 'asset'
                },
                {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                    mimetype: 'application/font-woff',
                    type: 'asset'
                },
                {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    mimetype: 'application/octet-stream',
                    type: 'asset'
                },
                {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    type: 'asset/resource'
                }
            ]
        }
    }