Daniel E Daniel E - 2 months ago 12x
Less Question

How to have Babel in Webpack ignore .less files

I am trying to load less files directly from node_modules, specifically the 'react-widgets' library. I set up a very simple example following the directions from their site, into a basic template. To my dismay I get the following error message:

(function (exports, require, module, __filename, __dirname) { @import "./variables.less";
SyntaxError: Unexpected token ILLEGAL
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:\GitHub\react-webpack-template\webpack.config.js:4:1)
at Module._compile (module.js:541:32)

It's complaining about the @import at the start of the file. This is valid Less so I'm pretty sure it's Babel interfering, but I'm unsure how to get it to ignore my .less files.

This is my webpack config


module.exports = {
entry: './index',
output: {
filename: 'browser-bundle.js'
devtool: 'source-map',
module: {
loaders: [
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
{ test: /\.gif$/, loader: "url-loader?mimetype=image/png" },
{ test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]" },

Similar SO responses that I've attempted but still left me scratching my head.

What else should I try?


The problem is that if that is your webpack config, you can't require('react-widgets/lib/less/react-widgets.less') inside of it. That goes inside a component somewhere.