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
Post a Comment