javascript - use LESS in webpack and es6 -


i'm following lecture on angular webpack.
trying add less loader , 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 es6 need npm 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 css , inject style tag    need to: npm 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 src directory have app.js , index.html , style.less files.

finally , 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"   } } 


idea why i'm getting error ?
thanks

i had exact same problem you. managed solve tiny change.

path.join(__dirname, 'src') 

instead of using:

__dirname + '/src/ 

now, make sure webpack.config.js like:

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

and when import style.less used above

import './style.less'; 

Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -