VS2017 Angular 5プロジェクトでLESSスタイルシートを使用

Question

私はそれが見た目よりも簡単にすべきだと思います。私はwebpackを初めて使っていて、何が欠けているか把握するのに何時間も費やしました。

私が必要とするのは、低速プリプロセッサを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を取得しますLESSスタイルシート。本当に？私はローダーを提供しています、他に何が必要ですか？

私はそうのような角度成分で私のスタイルシートを使用しようとしている：

@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

最後に、私はそれが完全に取り組みました。何時間もかかりましたし、すべてを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. 3つのローダーがすべて必要です。