問題タブ [sass-loader]

プロジェクト内にsass-loaderを使用してscssファイルをロードし、node_modulesリゾルバーも使用しています。@import '~styleguide/src/vars.scss'

反応ストーリーブックを読み込もうとしているときに、これを渡していますwebpack.config.js

sass-loadernode_moduleから読み取ることができるものから、解決は自動である必要がありますが、機能していないようです:

ここにエラーメッセージがあります

なぜこれが起こっているのか誰にも分かりますか？

webpack についてあまり知識がなくても、string-replace-loader ( https://www.npmjs.com/package/string-replace-loader ) を使用して、SASS パーシャル内のいくつかの文字列を置き換えようとしています。

私のwebpack構成は次のようになります

私が理解しているように、「.scss」で終わるすべてのファイルの「mySearch」を「replaceWith」に置き換えます。

ただし、SASS パーシャルは置き換えられません。アンダースコアのないファイルのみ。アンダースコアのあるファイルは読み込まれていないため、デバッグローダー ( https://www.npmjs.com/package/debug-loader ) を使用してこれを確認できます。

これらのファイルもロードされていることを確認するにはどうすればよいですか?

私は webpack に頭を悩ませていますが、index.scss ファイルから bootstrap-sass を含めようとすると、うまくいきません。

この webpack conf はうまく機能し、.css ファイルを css/stylehseet.css に出力します

問題は、index.scss に bootstrap-sass を含める必要があることです。https://www.npmjs.com/package/sass-loader#importsに従って~ を追加すると、webpack がすべてを解決する必要があります。

問題は私の試みではありません:/。出力が得られます：

Webpack はかなり強力ですが、家を一周する必要があります... これは私の package.json ファイルです

誰でも見つけることができる、私が見逃しているマイナーなものはありますか:)?

sass-loader バージョン: 4.1.1

node-sass バージョン: 4.1.1

ウェブパック: 1.14

ノードのバージョン: 7.3

Linux でのみ sass-loader が失敗するビルドが表示されます (Mac では問題ありません) が、毎回ではありません。これがsassの問題なのか、sass-loaderの問題なのか、完全にはわかりません。webpack の設定に関係しているようですが、何が悪いのかよくわかりません。Extract webpack text プラグインを使用していますが、それがなくても同じバグが発生します。

2 つのエントリ ポイントが同じセットの sass を参照することに関連しているようです。

私のルート レベルには、main.scss と alternate.scss の 2 つの sass ファイルがあります。

フォルダー 1 または 2 内のものにはインポートがありません。

私のwebpack構成エントリポイントは次のようになります

エラーの原因となっているミックスインは次のようになります

これは、スタイルのローダー構成です。

私のソースscssファイルには、これがあります：

次のエラーが表示されます。

モジュールの解析に失敗しました: /client/fonts/icomoon.svg?-cvpazo 予期しないトークン (1:0) このファイル タイプを処理するには、適切なローダーが必要な場合があります。

Webpack は font-face 宣言をロードできません。font-face を機能させるには、ここで何をする必要がありますか?

webpack と sass-loader/style-loader/css-loader を使用しているときに、ブラウザで背景画像を正常に見つけようとして問題が発生しています。

変更するたびにコンパイルプロセスが失敗するため、パスは正しいようですが、そのままで問題ありません。

これまでのところ...

成分

CSS

そのまま、divは透明です。コンテナはありますが、背景画像の読み込みに失敗します。私はWebpackでSASSをコンパイルするのが初めてなので、これは私のファイル構造に関係しているかもしれません.

これは私のファイルツリーの関連部分です:

app.scssをメインの js ファイルapp-client.js(React がアプリケーションにマウントするファイル) にインポートしています。

css プロパティで指定されたパスはbackground-image、ルート ディレクトリまたはスタイルシートに対して相対的である必要がありますか? ルート ディレクトリ ( ) を想定してい/staticます。

どんな助けでも感謝します。

アップデート

ファイルツリー

webpack.config.js

パッケージ.json

ExtractTextPlugin を使用して sass から単一の css ファイルを生成し、webpack ローダーを介したインポートを介して reactjs アプリ内で使用できるように webpack を構成しました。

sass ファイルの使用は、react コンポーネントの import ステートメントによって検出され、出力ファイルが生成されますが、生成される main.css ファイルは空であり、インポートは空のスタイル オブジェクトを返します。間違っている？

構造

Webpack 構成

navbar.scss

Navbar.js

症状

ローダーとインポート(もはや問題ではありません。以下の回答を参照してください)

1. console.log(styles) = オブジェクト {}

2. styles.navbar = 未定義

プラグイン

1. public/styles/main.css が空です(もはや問題ではありません。以下の回答を参照してください)

質問

1. Narbar.js にスタイルをインポートするときに、スタイルが空のオブジェクトになるのはなぜですか? 何を間違って設定しましたか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）
2. public/style/main.css が空なのはなぜですか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）