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