Как подключить less к Webpack?

Question

[jtag]

Подскажите как с генерировать css из less с помощью webpack. Использую Extract Text Plugin.

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin('public/stylesheets/style.css');

module.exports = {
    entry:  './public/javascripts/index.js',
    output: {
      filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.less$/i,
            loader: extractLess.extract(['css-loader', 'less-loader'])
        }]
    },
    plugins: [
        extractLess
    ]
};

Такой вывод в консоль:

Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.5
Time: 69ms
Asset Size Chunks Chunk Names
bundle.js 2.47 kB 0 [emitted] main
[0] ./public/javascripts/index.js 0 bytes {0} [built]

Answer 1

[Максим]

Webpack 2/3 ?

...
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// в секции plugins
plugins: [
...
new ExtractTextPlugin({
      filename: 'style-[contenthash].css',
      disable: false,
      allChunks: false, // true
    }),
...
]

в секции module -> rules (loaders)
...
{
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'less-loader'],
          publicPath: '/public', // ваш publicPath
        }),
      },

Comments

[jtag]

Выпадает ошибка:
C:\Users\jtag\Dropbox\work\lessTest\node_modules\schema-utils\dist\validateOptions.js:40
throw new _ValidationError2.default(ajv.errors, name);
^

false

[Максим]

jtag_, сложно сказать.. создайте репозиторий, приложите к вопросу.

[jtag]

Максим, может ресурс скинете, где почитать про less-css. Еще не совсем понятно какую версию webpack использовать

[Максим]

jtag_, используйте последнюю, если нет особого требования использовать webpack 1.
В документации есть готовые рецепты по поводу less/sass + extractTextPlugin

[jtag]

Максим, их рецепты скопипастенные не работают (((

[jtag]

Максим, интересно почему webpack не выдает ошибку и не видит less.

Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.5
Time: 73ms
Asset Size Chunks Chunk Names
bundle.js 2.47 kB 0 [emitted] main
[0] ./public/javascripts/index.js 0 bytes {0} [built]

[Максим]

jtag_, это должно происходить, если внутри ./public/javascripts/index.js нигде нет подключения ваших less файлов. Он их не находит, таску делать нечего.
Еще вариант, что вам все же нужен js лоадер, так как изначально вы обрабатываете js файл.

[jtag]

Максим, спасибо, не подключил less в js, в этом была ошибка.

[Максим]

jtag_, забавно. отметьте решением тогда)