如何让Webpack中的Babel忽略.less文件

Question

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:

 D:\GitHub\react-webpack-template\node_modules\react-widgets\lib\less\react-widgets.less:1
 (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

 require('react-widgets/lib/less/react-widgets.less') 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.

• attempting to use ExtractTextPlugin
• ignoring .less in the babelrc file

What else should I try?

Answer 1

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.

Answer 2

This actually has nothing to do with babel, and everything to do with webpack itself. The problem you're running into is you're trying to require/import a .less file inside your webpack configuration file . That just plain isn't going to work, as that's not how webpack is designed. Nothing inside your webpack.config.js file makes it down to the client, it's meant to configure how your application code is built.

Since you already have less-loader configured, you need to move the line:

require('react-widgets/lib/less/react-widgets.less')

out of webpack.config.js and into your entry point ( ./index.js in this case).

(I've kept my original answer below).

---

(Original answer)

You don't want to ignore them, you want to process them with less-loader . That will compile them to valid css, and then you can use the style loader to load them into the document:

$ npm install --save-dev less less-loader css-loader style-loader

and then in webpack config:

loaders: [
    { test: /\.less$/, loader: 'style!css!less' }
]

From the less-loader github page :

webpack provides an advanced mechanism to resolve files. The less-loader stubs less' fileLoader and passes all queries to the webpack resolving engine. Thus you can import your less-modules from node_modules. Just prepend them with a ~ which tells webpack to look-up the modulesDirectories

 @import "~bootstrap/less/bootstrap";