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

Question

我正在使用Webpack（在Windows环境中），我试图使用less-loader和提取文本-webpack-插件来生成css文件。我有less，webpack-core和webpack也在我的node_modules文件夹中。

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

require('./index.less');

我的Webpack配置：

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文件时，它首先使用low-loader生成CSS，然后使用css-loader将内容放入导出文件（<代码>css/app.css在这种情况下）。

这就是我得到的错误：

/app/index.less

模块构建失败：模块解析错误：模块解析失败：c：\节点\react2\node_modules\less-loader\index.js！C：\节点\react2\app\index.less第1行：意外令牌{

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

|正文{颜色：#333；|背景色：#F5F5；位于DependenciesBlock。（c:\node\react2\node\U modules\webpack\lib\NormalModule.js:113:20）位于DependenciesBlock.onModuleBuild（c:\node\react2\node\modules\webpack core\lib\NormalModuleMixin.js:310:10）位于nextLoader（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 at 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\modules\less\lib\less\render.js:35:17在c:\node\react2\node\lu modules\less\lib\less\parser.js:63:17在Object.ImportVisitor（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\lib\less\visitors\import visitor.js:50:14）在Object.ImportVisitor.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.module.exports（c:\node\react2\node\node\u modules\less\less loader\index.js:62:7）在Object.module

因此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{}的问题。。？

更新：如果我像这样添加style-loader：ExtractTextPlugin.extract（"style-loader"，"css-loader"，"less-loader"），错误会消失，但是结果CSS文件包含更少的嵌套仍然存在：body{p {} }而不是body{}body p{}。

Answer 1

我正在浏览这一页：https://webpack.github.io/docs/stylesheets.html 在优秀的网页文档中：-）。

它显示：ExtractTextPlugin.extract（style-loader， css-loader！less-loader"）。

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

我没有正确使用ExtractTextPlugin.extract（）。extract text webpack plugin文档显示，第一个参数是可选的（在未提取css时应使用的加载器），第二个参数是加载器字符串（应用于将资源转换为css导出模块的加载器）。