Using less-loader in webpack

I am creating a bundle.js file with webpack. I have decided I want to start using LESS as well and I have tried to add the less-loader as per the instructions:

https://github.com/webpack-contrib/less-loader

I ran:npm-install less-loader --save-dev

Then I updated the webpack.config.js to include the rules:

module.exports = {entry: "./src/entry.js",output: {path: __dirname,filename: "./bundle.js",publicPath: "/"},module: {//******** BELOW IS THE RULES U ADDED *************/rules: [{test: /\.less$/,use: [{loader: 'style-loader' // creates style nodes from JS strings}, {loader: 'css-loader' // translates CSS into CommonJS}, {loader: 'less-loader' // compiles Less to CSS}]}],//******** ABOVE IS THE RULES U ADDED *************/rules: [{test: /\.js$/,loader: 'babel-loader',query: {presets: ['es2015']}}],rules: [{test: /\.css$/,use: [{ loader: "style-loader" },{ loader: "css-loader" }]},{test: /\.(html)$/,use: {loader: 'html-loader',options: {attrs: [':data-src'] }}}]},devServer: {stats: 'errors-only'},stats: {colors: true},devtool: 'source-map'};

Then I added a less file and required it like so:require("./Bootstrap/bootstrap-iso.less");

the less file is just a wrapper for bootstrap (I have also tried simplier css)

#entry {@import (less) './css/bootstrap.css';}

But I continue to get the following error:

ERROR in ./src/Bootstrap/bootstrap-iso.lessModule parse failed: Unexpected character '#' (1:0)You may need an appropriate loader to handle this file type.| #entry {| @import (less) './css/bootstrap.css';| }@ ./src/entry.js 13:0-41

it seems that the loader is not loaded properly?