2016-04-11 36 views
9

Utilizzo Webpack (in ambiente Windows) e sto cercando di utilizzare less-loader e extract-text-webpack-plugin per generare un file css. Ho less, webpack-core e webpack anche nella mia cartella node_modules.Webpack, meno caricatore - Token inaspettato - Perché?

Nella mia app che uso:

require('./index.less'); 

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

Dalla mia comprensione, questo dovrebbe significare che quando Webpack si imbatte mio file index.less, utilizza less-loader prima per generare CSS, quindi css-loader per eliminare il contenuto nel file di esportazione (css/app.css in questo caso).

Questo è l'errore che sto ricevendo:

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)

Così il less-loader ha un problema alla linea 1. Il mio codice di meno è molto semplice:

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

Come può il less-loader avere una problema con body {} ..?

UPDATE: Se posso aggiungere style-loader così: ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader"), l'errore va via, ma il file CSS risultante contiene meno - come nel - la nidificazione è ancora lì: body { p {} } invece di body {} body p {}.

risposta

12

Stavo rivedendo questa pagina: https://webpack.github.io/docs/stylesheets.html negli eccellenti documenti Webpack :-).

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

Ho provato questo e funziona! Ottengo il semplice CSS nel file di output.

Non stavo usando ExtractTextPlugin.extract() correttamente. Lo extract-text-webpack-plugin docs mostra che il primo parametro è facoltativo (il loader che deve essere usato quando il css non viene estratto), e il secondo parametro è la stringa del caricatore (il loader che deve essere usato per convertire la risorsa in un modulo di esportazione css).

+5

Questo mi convince solo che qualcuno ha bisogno di creare un clone performante e meglio documentato di webpack. l'argomento * second * è quello necessario e il primo argomento è il loader di fallback? questo non ha senso. –

+4

La sintassi è cambiato ancora una volta, che il doc-link mostra anche: uso: ExtractTextPlugin.extract ({ ripiego: "style-loader", uso: "css-loader meno-loader" }) –