Use LESS in webpack and es6

Question

I am giving an Angular lecture using Webpack .
I am trying to add less bootloader and keep getting 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 :

 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 :

 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 get this error?
thanks

Answer 1

I had the same problem as you. I managed to solve this with minor changes.

 path.join(__dirname, 'src') 

instead of using:

 __dirname + '/src/ 

make sure your webpack.config.js looks like this:

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

and when i import style.less i used as 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';