webpack "cannot find module"

Question

Switching from Gulp to Webpack, can't get LESS css to work for some reason

module.exports = {
    entry: {
        web: ['./src/web/ts/index.js']
    },
    output: {
        path: './dev/web/js/',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    resovle: {
        extensions: ['', '.js'],
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loaders: ['style', 'css', 'less']
            }
        ]
    }
};

this webpack.config.js seems okay, but the styles inside main.less are not copied to the ./dev folder, nor are they injected into the index.html file (I manually copied the file to the ./dev folder, and it was not modified). I tried

require("./src/web/less/main.less");

that got me a "Unexpected token" error, I tried

require("!style!css!less!./src/web/less/main.less");

that got me a "Cannot find module" error. As I said, removing both I get the bundle.js, but no CSS anywhere.

What's going wrong? Please help!

Answer 1

Did you forget to npm install css-loader style-loader less-loader?

Seen this issue a few times: webpack error in Cannot find module 'less'.