How can i call a background url in scss file?

Question

I'm trying to call a background URL in an scss file but webapack give me an error of compilation.

My project structur is :

dist
- bundle.js
- main.css
src
- public
  - assets
    - css
      1. scss
        
        components
        
        myfile.scss (insid components)
        
        main.scss
    - img
    - js
  - index.html
- app.js
webpack.config.js

This is the code which contains the error:

&:after{
    content:"";
    background: url('./../../../img/curve3.png') 100%;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    height: 170px;
}

This is what I got from the webpack console:

ERROR in ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss) Module not found: Error: Can't resolve './../../../img/curve3.png' >in >'/Users/retinas/Documents/Devloppement/static/um6/src/public/assets/css>/scss' @ ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss) 23:42-78

My webpack config :

            const path = require('path');
            const dev = process.env.NODE_ENV === 'dev';
            const ExtractTextPlugin = require("extract-text-webpack-plugin");


            module.exports = {
              mode: "development", 
              entry: "./src/app.js",
              watch: dev,


              devServer: {
                contentBase: path.resolve('./'),
                publicPath: '/assets/',
                port: 3000
              },

              output: {
                path: path.resolve(__dirname, "./dist"), 
                filename: "bundle.js"
              },

              module : {

                rules : [
                  {
                    enforce: 'pre',
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'eslint-loader',
                    }
                  },
                  {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                    }
                  },
                  {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: [
                        { loader: 'css-loader?url=false', options: { importLoaders: 1 } },
                        { loader: 'resolve-url-loader' },
                        {
                          loader: 'postcss-loader',
                          options: {
                            ident: 'postcss',
                            plugins: () => [
                              require('autoprefixer')({
                                browsers : ['last 2 versions', 'ie > 8']
                              }),
                            ]
                          }
                        },
                        'sass-loader'
                      ]
                    }) 

                  },
                  { 
                    test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'url-loader?limit=100000' 
                  }
                ]

              },
              plugins: [
                new ExtractTextPlugin({
                  filename : '[name].css',
                  disable : dev
                }),
              ]

            }

Thanks for your help

TheBotlyNoob · Accepted Answer · 2021-06-28 15:50:06Z

2

Finally, I found the solution of the problem, it was in the URL path it should be like this:

background: url('./../../img/curve3.png') 100%;

not this :

background: url('./../../../img/curve3.png') 100%;

I should began from the main.scss not from myfile.scss

Thanks.

edited Jun 28, 2021 at 15:50

TheBotlyNoob

3685 silver badges17 bronze badges

answered Feb 9, 2019 at 19:13

ferchach nasreddine

391 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Declan Kay · Accepted Answer · 2024-03-25 13:12:42Z

1

If you have SASS, you can use interpolation to add a folder structure variable to the image URL.

This way, if the folder structure was to change (if moving to production), then you just need to change a variable and all your images will have updated URLs.

$assetsURL : "/path/to/the/assets/folder";

.image {
  background: url(#{$assetsURL}/images/image-file-name.jpg);
}

answered Mar 25, 2024 at 13:12

Declan Kay

1365 bronze badges

Collectives™ on Stack Overflow

How can i call a background url in scss file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related