webpack は、ファイルsass-loaderを処理するモジュールで構成されてい.scssます。構成ファイルのチャンクは次のとおりです。

ご想像のとおり、私は ReactJS と hot-reloader を使用しています。アプリを構築する方法は、通常、さまざまなチュートリアルで提供されるよりもはるかにモジュール化されています (各コンポーネントstyle.scssには、同じフォルダーに独自のファイルが必要です)。したがって、現在のフォルダーの構造は次のようになります。

• _base.scss
• _変数.scss
• _components.scss

そして最後のものには、遠く離れた他のフォルダーのどこかに埋もれて@importいるすべての s からのs があります。style.scss明らかに、変数とミックスインのすべてのインポートと基本的なものを、いくつかの変数を使用する他のすべてのインポートの上に置きます。明らかに、ビルド プロセス中に変数が見つからないというエラー メッセージが表示されるのはなぜですか。この場合、Webpackssass-loaderは s の順序をどのように定義し@importますか? また、スタイルシートのインポートの構造をより明確にするにはどうすればよいですか? 私は一般的に 2 つの目標を達成したいと考えています。

補足:@import各バンドル で s の新しいリストを作成できるいくつかのヘルパー関数も検討しています。

このようなもの。しかし、私の直感によると、それは最善の解決策ではありません:)。

私が走るとき

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

そのため、 sass/lessファイルを明確にwebpack理解できず、webpack 構成に何が欠けているのかわかりません。skeleton.scssがインポートするファイルをpublic/css/style.cssファイルに出力する必要があります。

スケルトン.scss

パッケージ.json

webpack.config.json

どんな助けでも大歓迎です！

私は webpack を使用しており、JavaScript で scss ファイルをロードしたいと考えています。（または、分離できる場合は、それも問題ありません）。

これは私のwebpack構成です:

これは私のファイルリストです:

• src/html/index.html -> build/html/index.html (動作)
• src/images/** -> build/images/** (動作)
• src/js/index.js -> build/js/app.bundle.js (動作)
• src/scss/** -> build/css/** (動作しません)

これは私の JavaScript コードです。プロジェクトを開始したばかりなので、コードはあまりありません:

これを見ることができます: import "view/startup.scss"; JavaScript に scss ファイルをロードしたいのですが、webpack コマンドを実行すると、次のように表示されます。

ローダーのエラー /Users/.../Desktop/work/my-project/app/node_modules/css/index.js が関数を返さなかった @ ./scss/view/startup.scss 4:14-123

webpack config の "resolve" プロパティで、scss 用に別のルート ディレクトリを追加したことがわかります。また、sass-loader もロードしましたが、機能せず、理由がわかりません。

そして、私が知っているように、css/scss を含む Webpack を使用すると、宛先ファイルに自動的に挿入されるため、別のファイルとして抽出する必要はありません。これが機能することを望んでいます。

どんな助けでも大歓迎です:)

* 更新 * ./scss/view/startup.scss のコード

SCSS ファイルを変更すると、ページに適切にロードされますが、css の HMR (変更されたスタイルシートのホット モジュール置換) ではなく、ページ全体がリロードされます。HMR を Angular2 で動作させるにはどうすればよいですか?

該当する webpack 構成 (autoprefixer の postcss):

コンポーネント スタイルの実装:

私は一日中頭をかきむしっているという問題があります。私は Webpack と SASS で Angular 2 を使用していますが、プロジェクトに最初の *.png 画像を追加するまで、これまでのところすべてうまくいきました。

次の webpack 構成があります。

実行しようとすると、webpack で次のエラーが生成されます。

そして私のsassファイル：

background-image を削除すると、すべて正常に動作します。

Angular コンポーネントに sass ファイルをインポートする方法:

Angular 1 アプリで同様の構成を使用しましたが、うまくいきました。なぜこの設定で機能しないのか混乱しました。

私は現在、自分の webpack アプリケーションで sass を動作させようとしています。style-loader&の構成に成功しましたcss-loader。ただし、実装しようとするsass-loaderと、次のエラーが表示されます。

style-loader&をインストールする手順を説明しますcss-loader。

1. ランnpm install style-loader css-loader --save-dev

2. ローダーを webpack.config に追加しました:

   /li>

3. css フォルダーを作成し、そこに配置しますmyStyle.css

4. スタイルシートを反応コンポーネントにインポートしましたrequire(../../css/myStyle.css

これは機能し、問題はありませんでした。この後、追加しようとしましたsass-loader。私が行った手順は、最初の手順と非常に似ていました。

1. ランnpm install sass-loader node-sass --save-dev

2. webpack.config にローダーを追加しました

   /li>

3. に変更myStyle.cssしmyStyle.scssます。

4. スタイルシートを反応コンポーネントにインポートしましたrequire('../../myStyle.scss')

この後、上記の DOM に貼り付けられたエラーを受け取ります。コンソールが私にbarfsするエラーは次のとおりです。

提案や助けをいただければ幸いです。今のところ私は寝て、明日の朝に戻ってきます。コーディングをお楽しみください。おやすみなさい。

プロジェクトで MDL のレイアウト コンポーネントを使用したいだけです。

したがって、私のapp.cssファイルでは、これをインポートしています：

@import url('~material-design-lite/src/layout/_layout.scss');

ビルドプロセス中に次のエラーが発生します。

_layout.sccsこれらの行で始まります

私が間違っているかもしれないアイデアはありますか？

私の関連部分webpack.config.js：

関連する依存関係:

アップデート

@import url('~material-design-lite/src/material-design-lite.scss');これは部分的ではないため、レイアウトコンポーネントのみをインポートするように変更した後、試しました。

現在、次のエラーが発生しています。

コメントで失敗します。これを修正する方法がわかりません。ローダーとpostcssプラグインを使用してみましたが、役に立ちませんでした。古いエラーは単に新しいエラーに置き換えられました。postcss-scsspostcss-strip-inline-comments