0

I am new to react and I am trying to set a background image with scss in react. However, I get an error in webpack:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
 @ ./src/styles/styles.scss
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js

Below is the config file for webpack:

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        },
        {
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
        }
    ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 8585,
        historyApiFallback: true
    }
};

Below is the scss for the same:

.header-container{
    height: 85%;
    background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}

I have spent hours looking for the solution but nothing worked.

Please help. Thanks in advance!

rajput sufiyaan
  • 61
  • 1
  • 14
  • Just a guess, but I think when webpack bundles the assets, the relative path may not be the same as it is on your disk. Have you tried removing the `../..`? – aridlehoover Dec 15 '18 at 14:17
  • I have removes the ../../ and still got the error. However, when I add the url as /src/images/imageName, it build successfully but in the console I get 404 – rajput sufiyaan Dec 15 '18 at 14:45
  • To get quick fix please share your app folder structure at least the .scss file and the image where it is located – Hemadri Dasari Dec 15 '18 at 14:51
  • Do you mean that webpack builds correctly, but that you get a 404 in the browser's console? – aridlehoover Dec 15 '18 at 14:51
  • Thanks for the help and your time guys. I figured out the solution. Actually, the scss was imported in another scss file and therefore, had to put the path relative to the scss file where it is imported rather than where it is used and it worked. – rajput sufiyaan Dec 15 '18 at 15:05

0 Answers0