Javascript 网页包，更少的加载器-意外令牌-为什么？

我正在使用Webpack（在Windows环境中），并尝试使用

less loader

和

extract text Webpack plugin

生成css文件。我的

node\u modules

文件夹中还有

less

、

webpack core

和

webpack

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

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\U modules\less loader\index.js！c:\node\react2\app\index.less第1行：意外令牌{

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

|车身{颜色：#333；|背景色：#F5； 位于DependenciesBlock。（c:\node\react2\node\u modules\webpack\lib\NormalModule.js:113:20） 在DependenciesBlock.onModuleBuild（c:\node\react2\node\u modules\webpack core\lib\NormalModuleMixin.js:310:10） 在下一个加载程序（c:\node\react2\node\u modules\webpack core\lib\NormalModuleMixin.js:275:25） 在c:\node\react2\node\u modules\webpack core\lib\NormalModuleMixin.js:292:15 在context.callback（c:\node\react2\node\u modules\webpack core\lib\NormalModuleMixin.js:148:14） 在c:\node\react2\node\u modules\less loader\index.js:70:3 在c:\node\react2\node\u modules\less\lib\less\render.js:35:17 在c:\node\react2\node\u modules\less\lib\less\parse.js:63:17 在Object.finish[as _finish]（c:\node\react2\node\u modules\less\lib\less\parser\parser.js:183:28） 在Object.ImportVisitor.\u onsequence空（c:\node\react2\node\u modules\less\lib\less\visitors\import visitor.js:35:14） 在ImportSequencer.tryRun（c:\node\react2\node\u modules\less\lib\less\visitors\import sequencer.js:50:14） 在Object.ImportVisitor.run（c:\node\react2\node\u modules\less\lib\less\visitors\import visitor.js:29:25） 在Object.Parser.parse（c:\node\react2\node\u modules\less\lib\less\Parser\Parser.js:189:22） 在Object.parse（c:\node\react2\node\u modules\less\lib\less\parse.js:61:18） 在Object.render（c:\node\react2\node\u modules\less\lib\less\render.js:25:18） 在Object.module.exports（c:\node\react2\node\u modules\less loader\index.js:62:7）

因此

less-loader

在第1行有一个问题。我的less-code非常简单：

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

的问题

---

更新：如果我像这样添加

样式加载器

：

ExtractTextPlugin.extract（“样式加载器”、“css加载器”、“更少加载器”）

，错误消失了，但是结果css文件包含的嵌套仍然较少：

body{p}

而不是

body{}body p{}

我正在回顾这一页：在优秀的网页文档中：-）

它显示：

ExtractTextPlugin.extract（“样式加载器”、“css加载器！更少加载器”）

我试过了，效果很好！我在输出文件中得到了纯CSS

---

我没有正确使用

ExtractTextPlugin.extract（）

。显示第一个参数是可选的（在未提取css时应使用的加载程序），第二个参数是加载程序字符串（应用于将资源转换为css导出模块的加载程序）.

这让我确信，有人需要制作一个性能更好、文档记录更完整的Web包克隆。第二个参数是必需的，第一个参数是回退加载程序？这没有任何意义。语法再次更改，文档链接也显示：use:ExtractTextPlugin.extract（{fallback:“样式加载器”，使用：“css加载器！更少加载器”}）