SCSS absolute image urls are not transformed

I’m really having a hard time making this plugin work with my SASS files, so to make sure it’s not my own complex configuration that is in the way, I created a new project from scratch just to test the plugin and try and make it work with CSS url.

The simple project

// pages/styles.scss
.test {
  background-image: url('/static/test.jpg'); // this is not transformed
}

// pages/index.js
import React from 'react';
import './styles.scss';

export default () => <div className="test">Welcome to next.js!</div>

// next.config.js
const withSass = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withSass({
  assetPrefix: 'http://localhost:3000/',
}));

And the package.json

{
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^8.0.0",
    "next-optimized-images": "^2.3.3",
    "node-sass": "^4.11.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Note that our other project is on Next v7 (if that changes anything).

Expected behaviour

Since I’m using the assetPrefix Next config option, I’m hoping to see my image URL within the compiled CSS to change to something like this: http://localhost:3000/_next/static/test-hashHere.jpg.

Current behaviour

It’s not changing at all. I’m seeing the image since the assetPrefix is the same as my default dev server and Next is correctly parsing the image since if I change the path, it fails to compile.

[emileber]

To make it work with absolute paths using aliases in our SCSS, I needed to add the aliases configuration to the webpack configuration, something like that:

const path = require('path')

module.exports = {
  webpack (config, options) {
    config.resolve.alias['static'] = path.join(__dirname, 'static')
    return config
  }
}

So it would work like this in our SCSS:

.test {
  background-image: url('~static/test.jpg'); // notice the tilde
}

[emileber]

In my example above, I mainly changed my styles.scss to:

.test {
  background-image: url('../static/test.jpg');
}