Webpack5 multi-level @import fails to locate relative asset

[creage]

I have a structure

index.js
index.scss
assets/
   |__style.scss
   |__icons/
      |__icon_red/
         |__icon_red.scss
         |__icon_red.svg

index.js

import './index.scss';

index.scss

@import './assets/style.scss';

style.scss

@import './icons/icon_red/icon_red.scss';

icon_red.scss

.my_icon {  
    background-image: url('./icon_red.svg');
}

Trying to build this style ends up with error

Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './icon_red.svg' in 'index.js'

Webpack config

{
    test: /\.s[ac]ss$/i,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2
            }
        },
        {
            loader: 'resolve-url-loader'
        },
        {
            loader: 'sass-loader'
        }
    ]
}

It works fine in Webpack4.

[bholloway]

Hmm.. strange it works without sourceMap: true in sass-loader. Doesn't seem to be the problem but I'd eliminate that first in case the loader is note getting a source-map.

I don't recall any actual incompatibilities with Webpack 5 but I have recently added e2e tests in the v4-development branch. The v4 is currently unreleased but there will be a @next distag in the next few days🤞. The current @next is a little old but you can try it if you like.

Certainly its strange that it works in Webpack 4 but not Weback 5. If you use the debug option where does it seem to be looking for the asset?

[Ragash]

Hi @bholloway, i've a similiar problem with this config:

"resolve-url-loader": "^3.1.2", "laravel-mix": "^6", "sass": "^1.30.0", "sass-loader": "^10.1.0", "sass-resources-loader": "^2.1.1",

and this structure:

resources/
   |__assets/
      |__fonts/
         |__base-text.woff
         |__base-text.woff2
   |__sass/
      |__app.scss
      |__base/
         |__ _fonts.scss

from my app.scss i just import @import "base/fonts";

and from my _fonts.scss i define: @font-face { font-family: 'base-text'; src: url('../../assets/fonts/base-text.woff') format('woff'), url('../../assets/fonts/base-text.woff2') format('woff2'); font-weight: normal; font-style: normal; } relative from the web root (isn't it the point of having resolve-url-loader?)

i use Mix, so my confing is pretty straightfowar: mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');

but it simply blowup:

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve '../../assets/fonts/base-text.woff' in 'G:\laragon\www\testbug\resources\sass'

if i change the url making it relative to app.scss (simply removing "../") it will work, but seems that resolve-url-loader simply dont shoot in

[bholloway]

@Ragash you would need to check under the hood of mix to see how it's configuring the loader.

Its common for frameworks to use an older version of the loader or configure it using an old engine option. For example IIRC that was the problem with mix per this comment.

[bholloway]

Closing this due to lack of activity.

Please reopen if this is still a problem @Ragash