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\visitors\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文档显示,第一个参数是可选的(装载器(一个或多个)时不提取的CSS应使用),并且第二参数是装载器串(即应被用于所述资源转换为加载器(多个) css导出模块).