Webpack aliases not working inside of css

I am currently trying to use an alias for the Images folder path like so: background-image: url("~Images/60x60.jpg");

When importing the image in Js, it results in "./Assets/Images/60x60.jpg" which works. import './styles.scss?name=test'; import * as importedImg from "Images/60x60.jpg";

Using the alias inside of the scss file makes the build fail with error: ERROR in ./styles.scss?name=test Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js): Error: Cannot find module 'Images/60x60.jpg'

Using the absolute path works.

My webpack.config.js:


module.exports = {
    entry: {
        base: './index.js'
    },
    context: resolve(__dirname, "./"),
    output: {
        filename: '[name].js',
        path: join(__dirname, 'Build'),
        publicPath: "/Build/"
    },
    resolve: {
        extensions: [".js", ".ts", '.css', '.scss', '.sass', '.gif', '.png', '.jpg'],
        alias: {
            Images: "./Assets/Images/",
        }
    },

    module: {
        rules: [

            {
                test: /\.css|\.scss$/,
                use: [

                    {
                        loader: 'polymer-css-loader',
                        options: {
                            minify: false
                        }
                    },
                    'extract-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },

            {
                test: /\.(png|gif|jpg|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            publicPath: './Assets/Images/',
                            emitFile: false
                        }
                    }
                ]
            }
        ]
    }
};

It has to be something in the scss loader chain. Removing the polymer-css-loader and extract-loader resolves the alias correctly. https://codesandbox.io/s/l7q4q2w60q A codesandbox with the smallest bits of my project. You can check the files there.

superjose / polymer-css-loader

Webpack aliases not working inside of css #5