Webpack、less-loader - 意外标记 - 为什么？

我正在使用 Webpack（在 Windows 环境中）并且我正在尝试使用less-loader and extract-text-webpack-plugin生成一个css文件。我有less, webpack-core and webpack也在我的node_modules folder.

在我的应用程序中我使用：

require('./index.less');

我的网络包配置：

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

根据我的理解，这应该意味着当 Webpack 遇到我的index.less文件，它使用less-loader首先生成CSS，然后css-loader将内容放入导出文件中（css/app.css在这种情况下）。

这是我收到的错误：

./app/index.less 中出现错误

模块构建失败：ModuleParseError：模块解析失败：c:\node\react2\node_modules\less-loader\index.js!c:\node\react2\app\index.less 第 1 行：意外的标记 {

您可能需要适当的加载程序来处理此文件类型。

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

So the less-loader第 1 行有问题。我的 LESS 代码非常简单：

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

怎样才能less-loader有问题body {}..?

UPDATE: 如果我加上style-loader像这样：ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader")，错误消失，但生成的 CSS 文件包含 LESS - 如 - 嵌套仍然存在：body { p {} }代替body {} body p {}.

我正在查看此页面：https://webpack.github.io/docs/stylesheets.html https://webpack.github.io/docs/stylesheets.html在优秀的 Webpack 文档中:-)。

表明：ExtractTextPlugin.extract("style-loader", "css-loader!less-loader").

我尝试过这个并且有效！我在输出文件中得到纯 CSS。

我没有使用ExtractTextPlugin.extract()正确。这extract-text-webpack-plugin docs https://github.com/webpack/extract-text-webpack-plugin表明第一个参数是可选的（未提取 css 时应使用的加载程序），第二个参数是加载程序字符串（应用于将资源转换为 css 导出的加载程序）模块）。