web-dev-qa-db-ja.com

Webpack、less-loader-予期しないトークン-なぜですか？

私は（Windows環境で）Webpackを使用しており、_less-loader_と_extract-text-webpack-plugin_を使用してcssファイルを生成しようとしています。 _webpack-core_フォルダにもless、_node_modules_、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行目：予期しないトークン{

このファイルタイプを処理するには、適切なローダーが必要になる場合があります。

|本体{|色：＃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）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\Objective.ImportVisitor.runのImportSequencer.tryRun（c：\ node\react2\node_modules\less\lib\less\visitors\import-sequencer.js：50：14）のvisitors\import-visitor.js：35：14） （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）atObject。 Object.render（c：\ node\react2\node_modules\less\lib\less\render.js：25）で解析（c：\ node\react2\node_modules\less\lib\less\parse.js：61：18） ：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 {}_ ..にどのように問題がありますか？

[〜＃〜] update [〜＃〜]：_style-loader_を次のように追加すると：ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader")エラーは消えますが、結果のCSSファイルにはLESSが含まれます-のように-ネストはまだあります：_body { p {} }_の代わりに_body {} body p {}_。

javascriptlesswebpack
11
Stephen Last

私はこのページをレビューしていました： 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が抽出されないときに使用する必要があるローダー）であり、2番目のパラメーターはローダー文字列（変換に使用する必要があるローダー）であることを示しますcssエクスポートモジュールへのリソース）。

12
Stephen Last