Webpack, less-loader - nieoczekiwany token - dlaczego?

Question

Używam Webpack (w środowisku Windows) i próbuję użyć less-loader i extract-text-webpack-plugin do wygenerowania pliku css. Mam także less, webpack-core i webpack również w moim folderze node_modules.

W moim app używam:

require('./index.less'); 

My WebPACK config:

const path = require('path'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: [ 
     './app/index.jsx' 
    ], 
    output: { 
     path: path.join(__dirname, '/public'), 
     filename: "js/app.js" 
    }, 
    module: { 
     loaders: [{ 
      test: /\.(js|jsx)$/, 
      include: path.join(__dirname, '/app'), 
      exclude: path.join(__dirname, '/node_modules'), 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015', 'react'], 
       plugins: ["transform-object-rest-spread"] 
      } 
     },{ 
      test: /\.(css|less)$/, 
      loader: ExtractTextPlugin.extract("css-loader", "less-loader") 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('css/app.css') 
    ] 
}; 

Z mojego zrozumienia, powinno to oznaczać, że kiedy WebPACK spotyka moim pliku index.less, używa less-loader najpierw wygenerować CSS, a następnie css-loader, aby upuścić zawartość do pliku eksportu (w tym przypadku css/app.css).

Jest to błąd Dostaję:

ERROR in ./app/index.less

Module build failed: ModuleParseError: Module parse failed: c:\node\react2\node_modules\less-loader\index.js!c:\node\react2\app\index.less Line 1: Unexpected token {

You may need an appropriate loader to handle this file type.

| body { | color: #333; | background-color: #f5f5f5; at DependenciesBlock. (c:\node\react2\node_modules\webpack\lib\NormalModule.js:113:20) at DependenciesBlock.onModuleBuild (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) at nextLoader (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) at c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15 at context.callback (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14) at c:\node\react2\node_modules\less-loader\index.js:70:3 at c:\node\react2\node_modules\less\lib\less\render.js:35:17 at c:\node\react2\node_modules\less\lib\less\parse.js:63:17 at Object.finish [as _finish] (c:\node\react2\node_modules\less\lib\less\parser\parser.js:183:28) at Object.ImportVisitor._onSequencerEmpty (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:35:14) at ImportSequencer.tryRun (c:\node\react2\node_modules\less\lib\less\visitors\import-sequencer.js:50:14) at Object.ImportVisitor.run (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:29:25) at Object.Parser.parse (c:\node\react2\node_modules\less\lib\less\parser\parser.js:189:22) at Object.parse (c:\node\react2\node_modules\less\lib\less\parse.js:61:18) at Object.render (c:\node\react2\node_modules\less\lib\less\render.js:25:18) at Object.module.exports (c:\node\react2\node_modules\less-loader\index.js:62:7)

Więc less-loader ma problem na linii 1. Mój MNIEJ kod jest bardzo prosty:

body { 
    color: #333; 
    background-color: #f5f5f5; 
    margin: 0; 
    padding: 2% 5%; 
    text-align: center; 
    font-family: arial; 
    font-size: 1em; 
    p { 
     margin: 0 0 1em 0; 
     padding: 0; 
    } 
} 

jaki sposób less-loader mieć problem z body {} ..?

UPDATE: Jeśli dodać style-loader tak: ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader"), błąd nie zniknie, ale wynikowy plik CSS zawiera mniej - tak jak w - gniazdowania nadal istnieje: body { p {} } zamiast body {} body p {}.

Answer 1

Przeglądałem tę stronę: https://webpack.github.io/docs/stylesheets.html w doskonałych dokumentach Webpack :-).

Pokazuje: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader").

Próbowałem tego i działa! Dostaję zwykły CSS w pliku wyjściowym.

Nie korzystałem poprawnie z ExtractTextPlugin.extract(). Numer extract-text-webpack-plugin docs pokazuje, że pierwszy parametr jest opcjonalny (program ładujący, którego należy użyć, gdy css nie jest wyodrębniany), a drugi parametr jest ciągiem ładującym (modułem ładującym, który powinien zostać użyty do konwersji zasobu na moduł eksportu css).