SCSS absolute image urls are not transformed

[emileber]

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:https://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:https://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]

Note that it works for image URLs that are loaded with a require or import.

import MyImage from '../static/test.jpg';

export default () => <img src={MyImage} />;

Which outputs correctly:

<img src="http:https://localhost:3000/_next/static/images/test-b079a0eed8d271677f1868eb5b607faa.jpg">

[emileber]

Other things I tried:

• Using CSS modules
• Re-ordering the Next plugins
• Playing aroung with the imagesPublicPath, optimizeImagesInDev, optimizeImages and inlineImageLimit options
• Outputting the webpack rules, and I can see the img-loader and url-loader correctly in the array.

[emileber]

😕 😳 ...ok, so I just found out that all the URLs need to be relative, which I guess works best with images that are close to a SCSS file in a module directory. 🎉

[emileber]

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

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

[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
}

[jamesl1001]

Hey Emile, I'm having the same issue as you.

Can I confirm, is your static directory inside /public or is it immediately at the root directory since you're using assetPrefix?