Webpack bündelt nicht weniger als CSS?

Question

Ich habe verschiedene Konfigurationen ausprobiert. Ich habe es geschafft, meinen Jsx-Code in ein gebündeltes JS zu übertragen, das scheint zu funktionieren.

Jetzt versuche ich, meine .Weniger Dateien in eine einzige gebündelt CSS-Datei zu bündeln im Verzeichnis/wwwroot/

Jede Quelle habe ich versucht, Online-Show 1 der 3 verschiedenen Quellen zu suchen, dass sie‘ Ich habe kopiert, aber ich kann keine von ihnen zur Arbeit bekommen.

Wie kann ich webpack bündeln meine weniger Dateien und bündeln es in eine einzige CSS-Datei in/wwwroot /?

Meine Dateistruktur:

/wwwroot/ /* wwwroot, public files*/ 
/Content/css/ /* .less files */ 
/Content/jsx/ /* .jsx files */ 

Mein webpack configruation:

"use strict"; 
var glob = require("glob"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     app: glob.sync("./Content/*/*.jsx") 
    }, 
    output: { 
     filename: "./wwwroot/[name].min.js" 
    }, 
    devServer: { 
     contentBase: ".", 
     host: "localhost", 
     port: 9000 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: "babel-loader" 
      }, 
      { 
       test: /\.less$/, 
       loader: ExtractTextPlugin.extract({ 
        use: "less-loader" 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: "./wwwroot/[name].min.css" 
     }), 
    ], 
}; 

Hier ist die Ausgabe:

Version: webpack 2.5.1 
Time: 322ms 
       Asset  Size Chunks    Chunk Names 
./wwwroot/app.min.js 2.75 kB  0 [emitted] app 
    [0] ./Content/jsx/app.jsx 0 bytes {0} [built] 
    [1] multi ./Content/jsx/app.jsx 28 bytes {0} [built] 
Process terminated with code 0. 

Answer 1

Fügen Sie die fallback Option für Ihre ExtractTextPlugin und css-loader in Ihre Liste der Lader. Installieren Sie style-loader mit npm install --save-dev style-loader, wenn Sie es noch nicht haben.

{ 
    test: /\.less$/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: ['css-loader', 'less-loader'] 
    }) 
}