Wie Babel in Webpack Ignorieren .less-Dateien

Question

Ich versuche, weniger Dateien direkt aus node_module, insbesondere die "Reagieren-Widgets" -Bibliothek zu laden. Ich habe ein sehr einfaches Beispiel nach den Anweisungen von their site, in eine basic template eingerichtet. Zu meiner Bestürzung bekomme ich folgende Fehlermeldung:

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) 

Es beschwerte sich über die @import am Anfang der Datei. Das ist gültig Weniger, da bin ich mir ziemlich sicher, dass Babel eingreift, aber ich bin mir nicht sicher, wie ich meine .less-Dateien ignorieren kann.

Das ist mein 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]" }, 
 
    ] 
 
    } 
 
};

Ähnliche SO Antworten, die ich versucht habe, aber noch ließ ich meinen Kopf kratzen.

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

Was sollte ich versuchen?

Answer 1

Das Problem ist zu Nachschau, dass, wenn das Ihr webpack Config ist, können Sie nicht require('react-widgets/lib/less/react-widgets.less') im Inneren. Das geht irgendwo in eine Komponente.

Answer 2

Das hat eigentlich nichts mit babel zu tun, und alles was mit dem webpack selbst zu tun hat. Das Problem, auf das Sie stoßen, ist, dass Sie eine .less Datei in Ihrer Webpack-Konfigurationsdatei anfordern/importieren möchten. Das wird einfach nicht funktionieren, da Webpack nicht so gestaltet ist. Nichts in Ihrer webpack.config.js Datei macht es zum Client, es soll konfigurieren, wie Ihr Anwendungscode aufgebaut ist.

Da Sie bereits less-loader konfiguriert haben, müssen Sie die Zeile bewegen:

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

aus webpack.config.js und in Ihren Eintrittspunkt (./index.js in diesem Fall).

(Ich habe meine ursprüngliche Antwort unten gehalten).

---

(Original-Antwort)

Sie wollen nicht, sie zu ignorieren, wollen Sie sie mit less-loader verarbeiten. Das wird sie auf gültige CSS, kompilieren und dann können Sie den Stil Loader verwenden Sie sie in das Dokument zu laden:

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

und dann in webpack config:

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

Vom less-loadergithub page:

webpack bietet einen erweiterten Mechanismus zum Auflösen von Dateien. Der less-loader stubs weniger 'fileLoader und übergibt alle Abfragen an die Webpack-Resolving-Engine. So können Sie Ihre less-Module von node_modules importieren.prepend sie nur mit einem ~ die webpack erzählt die modulesDirectories

@import "~bootstrap/less/bootstrap";