WebPackをSASSファイルで使用するように設定できません

Question

WebPackを使用していますが、今ではSASSファイルのコンパイルが必要になります（私たちはBootstrapを使用します）。まず、ノードサスとsass-loader（いずれかが必要なのかどうか不明）をインストールしました。次に、私ののserver.jsに次の行を追加しました（これ以上のものはSassオブジェクトを参照しています）。

import Sass from "node-sass"; 

コンパイルが私にFSパッケージには、私は、次の（両方とも個別にかつ同時に）を試してみたthis answerに基づいて欠落していることでエラーを与えました。 fsのエラーが消えましたが、代わりにノードモジュールのに予期しないトークンがあります。

node: { fs: "empty" }, 
target: "node", 
... 

私はそれらが何をし、それらが何に影響を与えるか分かりません。どちらも同じエラーを生成するようです。それらの上の光は、彼らがお互いに全く異なるように見えるので、特別なボーナスになります。

はその後、私はまたhereを提案し、以下の添加によって私webpack.config.jsでローダに有効にしてみました。同じように、hereのようなソースをマップしようとしました。 Another postは、ターゲット仕様のための別の構文を使用することを示唆しています...何も役立つようではなく、ついに私は完全に混乱し、あきらめました。

module: { 
    loaders: [ 
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ }, 
    { test: /\.scss$/, loader: 'style!css!sass' } 
    ] 
}, 
sassLoader: { sourceMap: true }, 
... 

私が読んでいる記事のいくつかは古いものであり、古くなり、良いよりも害があると感じています。また、WebPackとSASSの接続に関しては回答していない記事がかなりあるようです（例：thisとthis）。私は間違った木を吠えるかもしれないことを恐れている...

私は正しい方向を指す助けが必要です。

Answer 1

コードのどこにでもimport Sass from "node-sass";を書く必要はありません。 node-sassパッケージは、webpackを使用してノード環境で実行しているビルドパイプラインの一部です。しかし、フロントエンドコードは通常、ブラウザで実行されているため、ノードenvへの接続はありません。これはまた、fsに関連するエラーが発生した理由を説明します。また、node: { fs: "empty" }, target: "node", ...のものを取り除く必要があります。純粋なフロントエンドのWebpackパイプラインでは、これらのハッキングは必要ありません。物事は最初からソースマップを使用しますが、セットアップの残りの部分の実行後にそれらを追加しない軌道に乗るために

module.exports = { 
    ... 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loaders: ["style-loader", "css-loader", "sass-loader"] 
     } 
    ] 
    } 
}; 

：

は、あなたのwebpack.config.jsファイルに次のように試してみてください。ソースマップを取得するには、各ローダは以前のローダの結果を再利用する必要があります。なぜ始点マップがsass-loaderのために設定されているかを見てみる必要があります。