Webpack. Почему стили из style.less не собираются в style.css?

Question

[KnightForce]

Файлы js в папке "frontend".
Стили в "frontend/stylesheets". тут лежит style.less.

Все собирается в папку "public", как надо, кроме стилей.
На выходе верная иерархия, но в папке со стилями все-равно less файл.

На выходе просто тот же файл style.less, а не style.css.

webpack.config.js

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

const extractCSS = new ExtractTextPlugin('./stylesheets/[name].css');
const extractLESS = new ExtractTextPlugin('./stylesheets/[name].less');

module.exports = {
    context: path.resolve(__dirname, 'frontend'),
    entry: {
        ReactIgnore: "./ReactIgnore",
        App: "./App",
        index: "./index.js",
        initialState: "./initialState.js",
        common: "./common",
        style: "./stylesheets/style.less"
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
        library: '[name]'
    },
    resolve: {
        modules: [path.resolve(__dirname, "node_modules")]
    },
    resolveLoader: {
         modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    },

    module: {
      rules: [
        {
            exclude: /\/node_modules/,
            loader: "babel-loader",
            options: {
                presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],
                plugins: ['transform-runtime'], 
            },
        },
        {
            test: /\.css$/,
            use: extractCSS.extract(["css-loader"]),
        },
        {
            test: /\.less$/,
            use: extractLESS.extract(["css-loader", "less-loader"]
),

        },
        {
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
            use: "file?name=[path][name].[ext]",
        }
      ]
    },
    plugins: [
        
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",

        }),

        new webpack.NoEmitOnErrorsPlugin(),
        extractLESS,
        extractCSS,
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            minChunks: 2,
            path: path.resolve(__dirname, "public"),

        }),

    ],
    watch: true,
}

Answer 1

[EGO]

Потому что в самом начале вы подключили следующее:

const extractLESS = new ExtractTextPlugin('./stylesheets/[name].less');

Поэтому на выходе он и генерирует файл с расширением less.

Comments

[EGO]

Кстати, т.к. шаблон имени одинаковый и для css и для less, один файл будет забирать другой на выходе в порядке вызова плагинов. Так что либо разные имена, либо мёрджить всё это доп.плагином, либо разрабатывать только на less и в главном файле import'ировать нужные css.

[EGO]

*затирать, а не забирать)