Search code examples
modulepathwebpacksass-loader

Cannot get my head around this web-pack path error

My project structure is as follows:

enter image description here

I have the following webpack config file: 

module.exports = {
    context: __dirname + "/resources",
    entry: "./js/entry.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

and open up my entry.js file with 

require('./style.scss');

I understand this specific arrangement might not be working, but i have been trying different permutations and setups and configurations for over an hour and just can't seem to get webpack to find my .scss file.

Can someone please tell me how the webpack config file should be set up in my case?

Cheers.

edit,

trying to go up two levels in my require, 

require('../../scss/style.scss')

still gives me,

enter image description here

Similarly for 

require('../scss/style.scss');

enter image description here

Solution

  • Well I feel like a complete idiot, after renaming files and folders numerous times and trying different permutations of my require statement, I noticed the error seems to constantly state

    Can't resolve 'style' in ...

    Turns out i had not installed style-loader and css-loader into my project having though they were bundled with the sass-loader. (it's actually noted on the npm page), running 

    npm install css-loader style-loader -D

    in my project directory solved the issue.

    Still, thanks for your suggestions, and I hope this might help someone in the future.