問題タブ [webpack-style-loader]

私は Node/NPM/Webpack の世界全体に慣れていないので、これが明らかな場合はお詫びします。

Webpack にバンドルされた単純なフロントエンド プロジェクトを構築しようとしています。ノードがインストールされ、package.json ファイルが構成されています。ルート ディレクトリで「npm start」を実行すると、コンソールからエラーは表示されず、ブラウザで「localhost:3000」に移動して、「hello, world」の出力を確認できます。

次のタスクは、次のように、画像への参照を含むスタイルシートを含めることです。

.myimg {background: url(path/to/file.jpg);}

このように設定すると、webpack-dev-server 経由で (Web ブラウザーで localhost:3000 に移動して) イメージを表示できますが、プロジェクトをビルドすると、イメージへのパスが間違っています。何が間違っているのかわからないので、誰かが私がしていることを愚かなことだと知ってくれることを期待して、これを Stackiverse に投げ出しています。

これが私のpackage.jsonファイルです：

...そしてここに私のwebpack.config.jsファイルがあります:

...そして index.html ファイル:

...構成ファイルで参照される「start.js」ファイル:

...そして最後に、css ファイル自体の内容:

冒頭で述べたように、webpack-dev-server の世界では、画像へのパスが適切に解決され、DOM 要素の背景として表示されます。公開された世界では、ブラウザはファイルが見つからないことを教えてくれ、Safari のコンソールには明らかに不正なファイル パスが表示されます。

正しいローカル パスは次のとおりです。

明らかに、私は何か間違ったことをしているのですが、何が原因なのかわかりません。ヘルプやアドバイスをいただければ幸いです。

ありがとう！

xx.jsがロードされるたびにxx.lessをロードしようとする方法はありますか?

今のところ、require 'xx.less'関連するすべての js ファイルの先頭に追加しますが、これは少し醜いです。

css と sass のインポートを同じファイルで使用すると、生成された css の順序が正しくありません。

完全な例は、 https ://github.com/p0wl/webpack-jimdo-example/tree/master/sass-order で確認および再現できます。

次の設定があるとします。

出力：

.middle最初のインポートではありませんが、最初のルールです。.some最初のインポートであるため、最初のルールにする必要があります。

webpack.config.js (抜粋):

webpack とすべてのローダーは最新リリースです。

SASS を CSS にコンパイルしようとしましたが、うまくいきません。Webpack は css ファイルを生成しません。このプロジェクトを試してみたところ、うまくいったので、おそらくwebpack構成の何かが間違っています。

webpack.config.js

パッケージ.json

プロジェクト構造

webpack-dev-server の出力

シンプルなhtmlとCSSアプリを作っています。開発中の Web サイト LIVE に表示するには、SASS の変更が必要です。

すべての SASS と開発が完了したらwebpack -b、webpack を実行して SASS を CSS に変換する必要があります。

誰かが以前にこれを行ったことがあると確信しています。ありがとう。

SASS ビルドを gulp + node-sass から sass-loader を使用して webpack に移動しようとしています。

参考までに、gulp + node-sass 3.2 のビルド時間は約 2.5 ～ 3 秒です。

webpack では、読み込みに style!raw!sass を使用すると、10 ~ 秒のビルドが表示され、ソースマップは表示されません (raw ローダーのため)。ソースマップの css ローダーを機能させると、追加の解析によりビルドに 20 ～ 30 秒かかります。

物事を改善するためにどのようなトリックを使用できるか疑問に思っています。現時点で私ができる最善の方法は、javascript から SASS への多くの require(...) を使用して sass コンパイルを分割し、それらを 1 つのファイルに連結することです。-watch オプションを使用すると、偽のインクリメンタル コンパイルが可能になるため、最初のビルド後はそれほど悪くはありません。

それを超えて、より良いものにするために何かできることはないかと考えています。gulp + nodeass の 10 倍の速度低下は良くありませんが、ビルド ツールが 2 つあるのも良くありません (膨大な量のコードがあっても、webpack は JS で 100% 正常に動作します)。

.scsswebpack を使用してビルドするにはどうすればよいですか? より少ないローダーと css ローダーを見つけることができますが、scss は見つかりません。これはサスと同じですか？Sass を参照し続けていますが、構文が異なります

BootstrapとFont-awesomeの単純な requireをWebpackで実行しようとしています。Bootstrap CSS を読み込めましたが、Font-awesome が正しく動作しません。

これは私が結果として得るものです：

私のコードを以下に示します。私がここでやっている間違ったことは何ですか？

リソース: Github コードはこちらから入手できます。

パッケージ.json

エントリ ポイント: index.js

Webpack 構成ファイルwebpack.config.js