CODEWITHSUNDEEP
modulepathwebpacksass-loader
Sean Bugeja
Sean Bugeja

Reputation: 164

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

Upvotes: 1

Views: 153

Answers (2)

Fadi Hania
Fadi Hania

Reputation: 723

The problem is in the require statement

require('./style.scss');

It will search for your style file inside the resources/js directory in reference to your entry.js file try requiring your style using this:

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

Try to use path module for resolving the context path:

var path = require('path');
...
context: path.resolve("resources"),
...

Let me know if the problem resolved.

Upvotes: 2

Sean Bugeja
Sean Bugeja

Reputation: 164

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.

Upvotes: 0

Related Questions