Verwendung von less-plugin-glob mit Webpack

Ich versuche, das Build-System für ein vorhandenes Projekt von gulp zu webpack zu migrieren.Verwendung von less-plugin-glob mit Webpack

Es verfügt derzeit über eine einzige Anlaufstelle .Weniger Datei, die verschiedene andere Dateien wie folgt importiert:

@import 'bower_components/bootstrap/less/bootstrap.less'; 
@import 'components/**/*.less';

Dies schreibt eine einzelne CSS-Datei, die gefunden alle der .Weniger Dateien enthält. Es verwendet https://github.com/just-boris/less-plugin-glob, um Globs zu ermöglichen.

Über in Webpack habe ich soweit zu versuchen, eine Kombination von less-loader, css-loader und style-loader zu verwenden, um das gleiche zu erreichen. Der modules Teil meiner webpack Config sieht wie folgt aus:

var lessPluginGlob = require('less-plugin-glob'); 
... 
{ 
    test: /\.less$/, 
    use: [ 
     'style-loader', 
     { loader: 'css-loader', options: { importLoaders: 1 } }, 
     { loader: 'less-loader', options: { lessPlugins: [lessPluginGlob] }} 
    ] 
},

und ich versuche, meine „Eintrag“ weniger Datei wie so zu verlangen:

require('./app.less');

aber egal, was ich tue ich diese:

ERROR in ./~/css-loader?{"importLoaders":1}!./~/less-loader?{"lessPlugins":[{}]}!./app/app.less 
Module build failed: Can't resolve './components/**/*.less' in '/Users/matt/web-app/app'

Kann mir bitte jemand in die richtige Richtung zeigen?

Quelle

2017-03-06 Matt Wilson

Hey, ich habe gleiches Problem http://stackoverflow.com/questions/43527423/webpack-import-multiple-less-files-using-glob-expressions. Haben Sie bisher eine Lösung gefunden? –

Ich fürchte nicht @Semih Gk. - Am Ende listete ich nur die Dateien auf und dachte mir, dass ich später darauf zurückkommen würde ... –

Danke @Math Wilson. Nun, ich konnte bis jetzt keine gute Lösung finden, aber ich habe zumindest einen Weg gefunden. Sie können darüber nachdenken, es sei denn, Sie finden einen besseren. Ich poste es unterhalb meiner Frage. –

Ich habe gemacht, wie das funktioniert:

... 
{ 
    loader: 'less-loader', 
    options: { 
     paths: [ 
      path.resolve(path.join(__dirname, 'app')) 
     ], 
     plugins: [ 
      require('less-plugin-glob') 
     ] 
    } 
}

Überprüfen Sie den Quellcode aus: https://github.com/webpack-contrib/less-loader/blob/master/src/getOptions.js#L22

Ich weiß nicht, ob es sich um ein Bestimmungsgemäße Verhalten ist, aber wenn paths angegeben nicht createWebpackLessPlugin Wesen zuerst ausgeführt, bevor less-plugin-glob Plugin. Und es wirft einen Fehler auf, da createWebpackLessPlugin nichts über die nächsten Plugins weiß.

Also war meine Lösung einfach paths zu spezifizieren, less-plugin-glob zuerst ausgeführt werden.

Arbeitsbeispiel: https://github.com/notagency/webpack2-with-less-plugin-glob

Quelle

2017-04-25 22:20:56

Verwendung von less-plugin-glob mit Webpack

Antwort

Verwandte Themen