javascript - WebpackでLESSスタイルを読み込もうとしているBabel

Question

なぜこれを取得しているのかわかりませんSyntaxError。私のローダーが LESS をロードできないというエラーがあるように見えますが、私のextract-text-webpack-pluginorExtractTextPluginはそれをビルドすることができ、最終的style.cssに出力に a が表示されwebpackます。babel私のを処理しようとしているようLESSですが、どこで処理しようとしているのかわかりません。

エラー：

 /Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/lib/transformation/file/index.js:671
[1]       throw err;
[1]       ^
[1] 
[1] SyntaxError: /Users/bli1/Development/Javascript/ReviewWeb/app/styles/index.less: Unexpected token (1:0)
[1] > 1 | @import "buttons.less";
[1]     | ^
[1]   2 | @import "register.less";
[1]   3 | @import "generic";
[1]   4 | 
[1]     at Parser.pp.raise (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
[1]     at Parser.pp.unexpected (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
[1]     at Parser.pp.parseDecorator (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:170:10)
[1]     at Parser.pp.parseDecorators (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:156:37)
[1]     at Parser.pp.parseStatement (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:58:10)
[1]     at Parser.parseStatement (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
[1]     at Parser.pp.parseTopLevel (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
[1]     at Parser.parse (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
[1]     at Object.parse (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
[1]     at Object.exports.default (/Users/bli1/Development/Javascript/ReviewWeb/node_modules/babel-core/lib/helpers/parse.js:36:18)
[1] 24 Oct 16:12:41 - [nodemon] app crashed - waiting for file changes before starting...

webpack.watch.js:

var path = require("path"); 
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = require("./webpack.config.js");

var port = process.env.WEBPACK_PORT || 8080;
var host = process.env.HOST || 'localhost';

// add hot loader
config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port,
    "webpack/hot/only-dev-server"   // only prevents reload on syntax errors
);

config.plugins = [
    new Webpack.HotModuleReplacementPlugin(),
    new Webpack.NoErrorsPlugin(), // don't reload if there is an error
    new ExtractTextPlugin("style.css", {
        allChunks: true
    })
];

config.module.loaders = [
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
    { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') },
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.jsx$/, loaders: ['react-hot','jsx-loader'], include: path.join(__dirname, 'app') },
    { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'}
];

// dev server for react hot loader
config.devServer = {
    publicPath:  "/js/",
    filename: 'main.js',
    contentBase: "./public",
    hot:         true,
    inline:      true,
    lazy:        false,
    quiet:       true,
    noInfo:      true,
    headers:     {"Access-Control-Allow-Origin": "*"},
    stats:       {colors: true},
    host:        "0.0.0.0",
    port:        port
};

module.exports = config;

webpack.config.js

var path = require('path')
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: './public/js',
        filename: 'main.js',
    },
    devtool: 'eval',
    debug: true,
    module: {
        loaders: [
            { test: /\.jsx$/, loaders: ['react-hot','jsx-loader'], include: path.join(__dirname, 'app') },
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')},
            { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css', {
            allChunks: true
        }),

        new webpack.optimize.CommonsChunkPlugin('common.js'),
    ]
};

これが私のnpmスクリプトです。実行中にエラーが発生しますnpm run watch：

"scripts": {
    "start": "DEVELOPMENT=1 node ./node_modules/nodemon/bin/nodemon.js --watch server -e js,less index.js",
    "watch-client": "DEVELOPMENT=1 node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.watch.js && node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.watch.js",
    "watch": "node ./node_modules/concurrently/src/main.js --kill-others \"npm run watch-client\" \"npm run start\""
  },