Webpack，less-loader - 意想不到的令牌 - 为什么？

Question

我正在使用Webpack（在Windows环境中），我正在尝试使用less-loader和extract-text-webpack-plugin来生成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文件时，它首先使用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; | background-color：＃f5f5f5; 在DependenciesBlock。 （c：\\ node \\ react2 \\ node_modules \\ webpack \\ lib \\ NormalModule.js：113：20）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）位于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）位于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 \\来自Object.ImportVisitor.run的ImportSequencer.tryRun（c：\\ node \\ react2 \\ node_modules \\ less \\ lib \\ less \\ visits \\ import-sequencer.js：50：14）中的visitor \\ import-visitor.js：35：14） （C：\\节点\\ react2 \\ node_modules \\少\\ lib中 位于Object的Object.Parser.parse（c：\\ node \\ react2 \\ node_modules \\ less \\ lib \\ less \\ parser \\ parser.js：189：22）\\ less \\ visitor \\ import-visitor.js：29：25）在Object.render处解析（c：\\ node \\ react2 \\ node_modules \\ less \\ lib \\ less \\ parse.js：61：18）（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）

所以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文件包含LESS - 如 -嵌套仍然存在： body { p {} }而不是body {} body p {} 。

Answer 1

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

它显示： ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") 。

我尝试了这个，它的工作原理！ 我在输出文件中得到了简单的CSS。

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