問題タブ [css-loader]

現在Angular2で遊んでいます。私は主にバックエンドの .Net 開発者だったので、Web とすべての JavaScript の世界ではまったくの初心者です。私は、ほとんど同じことを別の方法で行うように見える JavaScript ライブラリとしてのすべての選択肢と、いくつかの顕著な違いに少し混乱しています。

私の場合、コンポーネントの styleUrls プロパティを使用できる場合、ng2 コンポーネントの CSS ローダーの目的は何なのか疑問に思っています。

私はこのチュートリアルに従っていますhttp://teropa.info/blog/2016/02/28/metabubbles-generative-art-with-angular-2.html#extracting-a-circles-serviceしかし、私は再現しようとしています代わりに typescript を使用します。

「CSS を使用したコンポーネントのスタイリング」の部分では、次のように Webpack の CSS ローダーを使用しています。

今のところ、私が知る限り、このようなコンポーネントの styleUrls プロパティを使用できるため、役に立たないようです

誰でも理解できますか？私はSystemJSを使用しているので、CSSローダーを使用するのが良い方法である場合、CSSファイルをロードするためのサポートはないと思います.webpackまたは私が見つけた複数のローダーのいずれかに切り替える必要があります. 例を見るたびに別のローダーを見つけるので、ローダーが本当に過密です;）

core.scss

WebPack 構成:

エラー：

モジュールのビルドに失敗しました: CssSyntaxError: postcss-modules-local-by-default: src/styles/core.scss:1:0: :global :global { の前に空白がありません {

sass-loader を 0.2 から 3.2.0 に、node を 0.10.35 から 5.0.0 にアップグレードしました。ノード 0.10.35 と sass-loader 0.2 ではすべて正常に動作していました。しかし、scss ファイルのインポート中に次のエラーが発生します。

Webpack 構成ファイル:

インポート ステートメントは 12cc-store/app/lib/mob/styles/modules/_template-layout.scss ファイルにあります。

12cc-store/app/lib/mob/styles/functions/_common-functions.scss は絶対ファイルパスです

何が欠けているのかわからない。@import の代わりに絶対パスの require() ステートメントを試してみましたが、まだ運がありません。ノードのバージョンをダウングレードするというスレッドが 1 つ見つかりましたが、それが私がやりたいことです。ノードとすべてのノード モジュールを更新したい。どんな助けでも大歓迎です。

webpack バンドラーを使用しているノード アプリケーションがあります。バンドルしようとするたびに、次のエラーが発生します。

node_modules への間違ったパスに明らかに問題があります。テストには '!' があります。その前に。これは、スタイル ローダーと CSS ローダーでのみ発生します。webpack がこのように正しく解釈する方法はありますか?

現在のアプリケーションの URL に関係なく、有効な URL を持つ CSS を生成するように webpack を構成する方法がわかりません。これが私のプロジェクト構造です：

ディレクトリは/themeブートストラップ テーマです。CSS の URL は相対です。例えば：

ルート URL ( http://localhost:8080/ ) または単一のセグメントを持つ URL ( http://localhost:8080/about ) でアプリケーションにアクセスすると、すべてが機能します。これらの相対 URL はベース URL に解決されます。ただし、2 つ以上のセグメントの URL ( http://localhost:8080/some/thing ) でブラウザーを更新すると、ブラウザーは最終的に次の URL を要求します。

http://localhost:8080/some/db812d8a70a4e88e888744c1c9a27e89.woff

React ルーターは最終的に URL の正しいマークアップを構築しますが、スタイルシートの URL は相対的であるため、機能しません。私はwebpackが初めてで、これを修正する方法がわかりません。

これが私のwebpack構成です：

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

Webpack でホット スタイル ローダーを有効にしようとしていますが、適切な構成が見つかりません。これが私のwebpack.config.jsです：

そして私のpackage.jsファイル：

しかし、どのように構成しても、ホット シンクが機能しません (.c​​ss ファイルの場合、.js ファイルの場合は正常に機能します)。誰かが私にそうする正しい方法を教えてもらえますか?