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.less
Module 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?
It was my mistakes, I should not have had multiple rules properties.. see working webpack.config.js snippet:
module: {
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
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
]
}