Alias set in "preact.config.js" fail to resolve when used in SCSS files

[FelixDz]

Do you want to request a feature or report a bug?

A bug.

What is the current behaviour?

Upgrading to the latest preact and preact-cli versions, I get errors when building my app. From what I understand, the custom resolve aliases I defined in preact.config.js (in order to simplify imports given my folder structure) no longer work only when used in .scss files (for instance, inside an url() for background property).

If the current behaviour is a bug, please provide the steps to reproduce.

Related parts in my preact.config.js file:

const path = require('path')

export default (config, env, helpers) => {
	config.resolve.alias = {
		'@': path.resolve(__dirname, 'src/components/'),
		'@style': path.resolve(__dirname, 'src/style/'),
		'@assets': path.resolve(__dirname, 'src/assets/'),
		...config.resolve.alias,
	}
}

Use case example, in a file Header.scss:

.Header {
	background-image: url('@assets/header/header.jpg');
}

Resulting error when running npm run build:

× ERROR ./components/global/header/Header.scss (../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--6-0!./components/global/header/Header.scss)
Module not found: Error: Can't resolve './@assets/header/header.jpg' in '.\src\components\global\header'
 @ ./components/global/header/Header.scss (../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--6-0!./components/global/header/Header.scss) 6:36-74
 @ ./components/global/header/Header.scss
 @ ./components/global/header/Header.js
 @ ./components/App.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

What is the expected behaviour?

Correct alias resolving in .scss files when using them to link assets.

Other relevant information.

Using node-sass: ^5.0.0 and sass-loader: ^10.1.0.

My preact info output:

Environment Info:
  System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
    Node: 14.15.1 - C:\Program Files (x86)\nodejs\node.EXE
    npm: 6.14.8 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Firefox: 83.0
    Chrome: 69.0.3497.100
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    preact: ^10.5.4 => 10.5.7
    preact-cli: ^3.0.3 => 3.0.3
    preact-render-to-string: ^5.1.10 => 5.1.12
    preact-router: ^3.2.1 => 3.2.1

I didn't find any directly related issue, but I hope I didn't miss anything already documented. I didn't find anything like a preact-cli upgrade guide, does this exist somewhere ?

[rschristian]

You mentioned you upgraded, what versions were you previously using?

[FelixDz]

@rschristian I upgraded as follows:

preact-cli: 2.1.1 -> 3.0.3
node-sass: 4.7.2 -> 5.0.0
sass-loader: 6.0.6 -> 10.1.0

I also upgraded preact from 8.5.3 to 10.5.4 recently but was able to build nicely after that so this is not related.

[rschristian]

Yikes, that's nearly 3 years of updates you just jumped then.

I'll look into it, might just be a style loader option or something that's no longer passed through.

[FelixDz]

Yikes, that's nearly 3 years of updates you just jumped then.

I know… Well, I'm no pro coder and this is a side-project !

Thank you for the help and let me know if I can investigate some tracks.

[rschristian]

Sorry, away from my desk so I can't try myself, but can you try prefixing your import with ~? That might work.

https://webpack.js.org/loaders/css-loader/#url

[FelixDz]

It works indeed !

My @imports correctly used that tilde but assets linking in properties using url() did not require it.

Sorry for the bother, especially since this wasn't a preact-cli issue.

[rschristian]

Ah, glad to hear it.

Might've been a change at some point with css-loader, not quite sure. Glad that's working for you now. Let me know if you have any further issues with this.