use LESS in webpack and es6

Question

I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.

 ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in  D:\projects\dev\webpack-angular-demo/src
 @ ./src/app.js 3:0-24

My webpack.config.js is :

module.exports = {
    context: __dirname + '/src',
    entry:'./app.js',
    module:{
        loaders:[
            {
                //create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
                //https://github.com/babel/babel-loader
                test:/\.js$/,
                exclude:'/node_modules',
                loader:'babel',
                query: {
                    presets: ['es2015']
                }
            }, 
            {
                //take less  convert to css and inject to style tag    need to: npm i css-loader less-loader less  style-loader -D
                //https://github.com/webpack/less-loader
                test:/\.less$/,
                exclude:'/node_modules',
                loader:"style!css!less"
            }           
        ]
    }
};

My app.js is:

import '../style.less';
class Log{
    constructor(){
        console.log("sdfsdf");
    }
}
new Log();

Inside the src directory i have the app.js , index.html and style.less files.

finally , this is my package.json file:

{
  "name": "webpack-angular-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "css-loader": "^0.23.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

any idea why i'm getting this error ?
Thanks

Answer 1

i had the exact same problem like you. i managed to solve that with tiny change.

path.join(__dirname, 'src')

instead of using:

__dirname + '/src/

now, make sure that your webpack.config.js look like:

var path = require('path');

module.exports = {
 context: path.join(__dirname, 'src'),
...

and when I import the style.less i used like above

import './style.less';

Answer 2

If all files are in the same directory (src), the first line in app.js should be:

import './style.less';