Webpack SASSローダーとファイルパスの理解

Question

ファイルパスの解決方法を理解するのにはいくつかの問題があります。私は標準的な方法でCSSとSASSローダーの両方を使用しています：

var ExtractTextPlugin = require（ 'extract-text-webpack-plugin'）;

module: { 
    loaders: [ 
     { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') } 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin('build/[name].min.css', { 
     allChunks: true 
    }) 
] 

だから、私はすべてのSASSがコンパイルされ、build/app.min.cssファイルにレンダリングされることを期待します。それはうまくいく。私はフォントの読み込みとインクルードに問題があることを除いて。

@import '~font-awesome/scss/font-awesome.scss'; 

それは動作しません：

はのは、私が/src/sass/style.scssファイル上で動作し、私は次のようにフォント素晴らしいSASSファイルを含める考えてみましょう。しかし、次のような相対パスを使用すると：

@import '../../node_modules/font-awesome/scss/font-awesome.scss'; 

これは機能します。

はその後、私は正しいフォルダに一致するようにフォント素晴らしいフォントパスを変更したい：

$fa-font-path: '~font-awesome/fonts'; 

また働きます。これは、私が概念を理解している限り、~はnode_modulesというフォルダを指しているので、私にとっては論理的です。

なぜ、フォントパスで動作し、SASSインポートでは機能しないのですか？ ~という表記も使用したいと思います。これは、いくつかのプロジェクトで使用されているファイルで、一部には../../../node_modulesが必要です。

ありがとうございました！ :)

Answer 1

うわー、あなたはWebpackでの私の人生をはるかに簡単にした記事を書いています。私はあなたを助けてくれます。

ここでの問題は、ExtractTextPluginで使用されている最初の引数が、ファイルの場所だけを指定することになっていないことです。

これを変更すると、ちょうど[name].min.cssに変更し、出力場所を別の場所に指定することができます。