Используйте таблицы стилей LESS в проекте VS2017 Angular 5

Question

Я считаю, что это должно быть проще, чем кажется. Я новичок в вебпаке, и я часами пытался выяснить, чего мне не хватает.

Все, что мне нужно, это добавить препроцессор LESS в webpack.config.js, Правило для CSS уже есть, и оно работает:

module: {
        rules: [
            { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }
        ]
    }

Но однажды добавлено очень простое правило для менее загруженного, например { test: /\.less$/, use: 'less-loader' } (Я пробовал многочисленные варианты этого правила), я всегда получаю ошибку You may need an appropriate loader to handle this file type на моей МЕНЬШЕЙ таблице стилей. В самом деле? Я предоставляю загрузчик, что еще нужно?

Я пытаюсь использовать мою таблицу стилей в компоненте Angular следующим образом:

@Component({
    styles: [require('./my.component.less')]
})

Точная ошибка:

NodeInvocationException: Prerendering failed because of error: Error: Module 
parse failed: Unexpected token (1:1)
You may need an appropriate loader to handle this file type.
// few lines of my styleshhet, so it was indeed located properly
// call stack ... at Object.module.exports ... at __webpack_require__...

Answer 1

Наконец-то я все заработал. Это заняло несколько часов, и я не нашел все в одном месте, поэтому я публикую полный ответ здесь.

TL; DR Это рабочая конфигурация в webpack.config.js, используйте его в sharedConfig.module.rules коллекция:

{
    test: /\.less$/, use: [
    { loader: "to-string-loader" },
    { loader: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
    {
         loader: "less-loader",
         options: {
             fallback: isDevBuild ? 'css-loader' : 'css-loader?minimize'
         }
     }]
}

Попался сюда:

1. Пытаясь использовать его в конфигурации клиентского пакета, я получил "Возможно, вам понадобится соответствующий загрузчик для обработки этого типа файлов" при предварительном рендеринге.
2. Пытаясь использовать его без опции отката, я получил "окно не определено" при предварительном рендеринге
3. Вам нужны все три загрузчика в очереди, иначе тоже не работает
4. Я считаю, что минификация будет работать, как и ожидалось, однако еще не проверил.