我正在使用 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)。

这是我遇到的错误:

ERROR in ./app/index.less

Module build failed: ModuleParseError: Module parse failed: c:\node\react2\node_modules\less-loader\index.js!c:\node\react2\app\index.less Line 1: Unexpected token {

You may need an appropriate loader to handle this file type.

| body { | color: #333; | background-color: #f5f5f5; at DependenciesBlock. (c:\node\react2\node_modules\webpack\lib\NormalModule.js:113:20) at 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) at 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) at 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\visitors\import-visitor.js:35:14) at ImportSequencer.tryRun (c:\node\react2\node_modules\less\lib\less\visitors\import-sequencer.js:50:14) at Object.ImportVisitor.run (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:29:25) at Object.Parser.parse (c:\node\react2\node_modules\less\lib\less\parser\parser.js:189:22) at Object.parse (c:\node\react2\node_modules\less\lib\less\parse.js:61:18) at Object.render (c:\node\react2\node_modules\less\lib\less\render.js:25:18) at 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 { } 正文 p {}。

最佳答案

我正在查看此页面: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 导出的加载器模块)。

关于javascript - Webpack，less-loader - 意外的 token - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36544545/