webpack-4

How can i call a background url in scss file?

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

My project structur is :

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

Solution

  • 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.