Why webpack can't find scss file

Question

I am getting a module not found error when importing scss file into index.js.

Here is my project directory:

Here is my index.js (it's in the js folder):

import '../sass/main.scss'

Here is my webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
      rules: [
          {
            test: /\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader'],
          }
      ]
  }
};

package.json:

"devDependencies": {
    "css-loader": "^5.0.1",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }

When I am moving the file to the root folder (src) it's working fine. but when moved back to the folder structure it says module not found.

Please any help would be appreciated.

Edit:

I am sorry it was my mistake I should have read the error correctly, it turns out I was using a background-image without giving its src location.

Answer 1

Try to set path from root folder: import './src/sass/main.scss' instead import '../sass/main.scss'