Failed to resolve background url(...)

Question

I try to figure out why I don't succeed to build my VUE project, the build fails when I scss style like this:

a small example of the issue in github

<style lang="scss" scoped>
.graf-demo {
            grid-area: 2 / 1 / 3 / 2;
            background: url('/assets/grafDemo.png') no-repeat;
        }
</style>

I get this Error message:

Module build failed (from ../node_modules/css-loader/dist/cjs.js): Error: Can't resolve '/assets/analyticsDemo.png' in '/dev/p6-tdcomm/View/js/components/analytics/' at /home/dev/node_modules/enhanced-resolve/lib/Resolver.js:209:21 at /home/dev/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/home/dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /home/dev/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7 at /home/dev/node_modules/enhanced-resolve/lib/Resolver.js:285:5

project structure:

dev:
   View:
       assets:
           analyticsDemo.png
       js:
         components:
                analytics:
                    page.vue
         app.js

webpack:

        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader',
                include: [resolve('js')]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['@babel/plugin-syntax-dynamic-import']
                    }
                },
                exclude: /(node_modules|View\/js\/utils\/jssip\.js)/
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        // Requires sass-loader@^7.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers')
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    }```

tmhao2005 tmhao2005 · Accepted Answer · 2021-01-27T09:59:28

I'm guessing to use the relative path would make more sense in this case:

<style lang="scss" scoped>
  .graf-demo {
     /* the relative url based on given path */
     background: url('../../../assets/grafDemo.png') no-repeat;
  }
</style>

Update based on your example

Looks like the issue is from your example which is different from your question which is unable to resolve /assets/logo.png. Regarding to relative path with the asset is supposed to be:

<style lang="scss">
  div {
    background: url("./assets/logo.png");
  }
</style>

Failed to resolve background url(...)

3 Answers

Update based on your example