Webpack, daha az yükleyici - Beklenmedik belirteç - Neden?

Question

Webpack kullanıyorum (Windows ortamında) ve bir css dosyası oluşturmak için less-loader ve extract-text-webpack-plugin kullanmaya çalışıyorum. Benim node_modules klasöründe de less, webpack-core ve webpack var. Benim app

kullandığım:

require('./index.less'); 

Benim WebPack yapılandırma:

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') 
    ] 
}; 

Benim anlayış, bu WebPack benim index.less dosyaya rastladığında geldiğinde, onu üretmek için less-loader ilk kullandığı anlamına gerektiğini CSS, sonra içeriğini dışa aktarma dosyasına (css/app.css bu durumda) bırakmak için css-loader.

Bu

alıyorum hatadır:

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)

Yani less-loader çizgisinde bir sorunu var 1. My AZ kod çok basit:

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; 
    } 
} 

nasıl less-loader bir olabilir body {} ile sorun mu var?

GÜNCELLEME: Böyle style-loader eklerseniz: ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader"), Hata kaybolduktan, ancak ortaya çıkan CSS dosyası AZ içeriyor - yuvalama hala var - gibi: body { p {} } yerine body {} body p {}.

Answer 1

Bu sayfayı inceliyordum: Mükemmel Webpack belgelerinde :-) https://webpack.github.io/docs/stylesheets.html.

Şunları gösterir: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader").

Bunu denedim ve işe yarıyor! Çıkış dosyasına düz CSS alıyorum.

ExtractTextPlugin.extract()'u düzgün kullanmıyordum. extract-text-webpack-plugin docs, ilk paramın isteğe bağlı olduğunu (css alınmadığında kullanılması gereken yükleyici (ler)) ve ikinci paramın yükleyici dizgisini (kaynağı dönüştürmek için kullanılması gereken yükleyici (ler) olduğunu gösterir. css dışa aktarma modülü).