Загрузка и извлечение Webpack2 LESS file

Question

Я пытаюсь настроить Webpack2 для обработки моих файлов LESS и создания из него отдельного CSS. Тем не менее, я все еще получаю сообщение об ошибке. У меня возникли проблемы с поиском примеров Webpack2, в которых описывается процесс, поэтому я не уверен, что мне не хватает.

Моего Webpack конфигурация:

module.exports = { 
    entry: { 
    'public': [ 
     './src/client/styles/public.js' 
    ] 
    }, 
    output: { 
    ... 
    }, 
    module: { 
     { 
     test: /.*\.less$/, 
     loader: ExtractTextPlugin.extract({ loader: 'less-loader', fallbackLoader: 'style-loader' }) 
     } 
    ] 

    }, 
    plugins: [ 
    new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }) 
    ] 
} 

public.js файла (я также пытался пропусканием меньше файла непосредственно запись с таким же результатом):

require('style.less') 

style.less файла

a { color: red; } 

Ошибка:

ERROR in ./~/less-loader!./src/client/styles/style.less 
Module parse failed: /node_modules/less-loader/index.js!/src/client/styles/style.less Unexpected token (1:2) 
You may need an appropriate loader to handle this file type. 
| a { 
| color: red; 
| } 

Из сообщения видно, что меньший загрузчик правильно передается файлу, но ломается. Я пытался пустой файл, но затем я получаю:

TypeError: text.forEach is not a function 

Версии:

"extract-text-webpack-plugin": "^2.0.0-beta.4", 
"less": "^2.7.1", 
"less-loader": "^2.2.3", 
"style-loader": "^0.13.1", 
"webpack": "^2.1.0-beta.25", 
"webpack-dev-server": "^2.1.0-beta.5", 
"yargs": "~3.5.4" 

Что может быть проблема?

Answer 1

Ок .. получил это работает с:

loader: ExtractTextPlugin.extract({ 
    loader:[ 'css', 'less' ], 
    fallbackLoader: 'style-loader' 
}) 

Answer 2

Возможно, вам также потребуется использовать дополнительную нагрузку, например, стиль или css-загрузчики. Из Docs:

var css = require("!raw!less!./file.less"); 
// => returns compiled css code from file.less, resolves imports 
var css = require("!css!less!./file.less"); 
// => returns compiled css code from file.less, resolves imports and url(...)s 

Менее Загрузчик просто обрабатывает обработку в CSS. Затем Webpack должен знать, как включить CSS, прежде чем он будет извлечен.