@artuh_a

Webpack. Компиляция нескольких Less в 1 css файл?

Начал разбираться с Webpack. Хочу, чтобы при сборке все less файлы компилировались в один style.css.
src
----less
--------style.less
--------style.css
---------blocks
----------------header-block.less
----------------page-block.less


style.less:
@import "blocks/header-block.less";
@import "blocks/page-block.less";


webpack.config.js:
...
  module: {
    rules: [
      {
        test: /style\.less$/,
        loader: 'less-loader'
      }
    ]
  }


Сейчас при сборке все содержимое blocks/*.less компилируется в style.css только после внесения любого изменения в файле style.less (после изменений файлов blocks/*.less ничего не происходит), еще дополнительно создаются файлы:
src
----less
--------style.less
--------style.css
---------blocks
----------------header-block.less
----------------header-block.css
----------------page-block.less
----------------page-block.css


Как настроить config, чтобы создавался только один style.css со всеми импортированными блоками не трогая style.less?
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 1
Splinter_1g
@Splinter_1g
.NET Core, VueJS
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [{
      test: /style/.less$/,
      loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: "css-loader!less-loader",
      }),
    }]
  },
  plugins: [new ExtractTextPlugin({filename:'style.css'})]
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы