Webpack，less-loader - 意外的令牌 - 为什么？

Question

我正在使用 Webpack（在 Windows 环境中），我正在尝试使用 less-loader 和 extract-text-webpack-plugin 生成一个 css 文件。我的node_modules 文件夹中也有less、webpack-core 和webpack。

在我的应用中我使用：

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 行：Unexpected token {

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

|身体 { |颜色：#333； |背景颜色：#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) 在 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)

所以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-loaderbody {}..怎么会有问题？

更新：如果我像这样添加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 docs 表明第一个参数是可选的（不提取 css 时应该使用的加载器），第二个参数是加载器字符串（应该用于转换资源的加载器到一个 css 导出模块）。