Webpack, bộ nạp ít hơn - Mã thông báo không mong đợi - Tại sao?

Question

Tôi đang sử dụng Webpack (trong môi trường Windows) và tôi đang cố gắng sử dụng less-loader và extract-text-webpack-plugin để tạo tệp css. Tôi có less, webpack-core và webpack cũng có trong thư mục node_modules của tôi.

Trong ứng dụng của tôi, tôi sử dụng:

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

Từ hiểu biết của tôi, điều này sẽ có nghĩa là khi Webpack đi qua tập tin index.less của tôi, nó sử dụng less-loader đầu tiên để tạo ra CSS, sau đó css-loader để thả nội dung vào tệp xuất (css/app.css trong trường hợp này).

Đây là lỗi tôi nhận được:

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)

Vì vậy, các less-loader có một vấn đề ở dòng 1. Mã LESS của tôi rất đơn giản:

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

như thế nào less-loader có thể có một vấn đề với body {} ..?

CẬP NHẬT: Nếu tôi thêm style-loader như thế này: ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader"), sai số sẽ biến mất, nhưng kết quả là các tập tin CSS chứa LESS - như trong - làm tổ vẫn còn đó: body { p {} } thay vì body {} body p {}.

Answer 1

Tôi đã xem lại trang này: https://webpack.github.io/docs/stylesheets.html trong tài liệu Webpack tuyệt vời :-).

Nó hiển thị: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader").

Tôi đã thử cách này và hoạt động! Tôi nhận được CSS đồng bằng trong tập tin đầu ra.

Tôi đã không sử dụng ExtractTextPlugin.extract() chính xác. extract-text-webpack-plugin docs cho thấy tham số đầu tiên là tùy chọn (bộ nạp) sẽ được sử dụng khi css không được trích xuất) và tham số thứ hai là chuỗi bộ nạp (bộ tải) sẽ được sử dụng để chuyển đổi tài nguyên thành mô-đun xuất css).