using less-loader in webpack
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']
}
}
}
]
}
Related videos on Youtube
Michael
C#, SharePoint, Angular/React software developer. Director at HotSnail
Updated on June 04, 2022Comments
-
Michael almost 2 years
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?