問題タブ [css-loader]

私は十数回の検索を試み、css-loader のドキュメントを読んでみましたが、それらは最新ではないと思います。

また、フロントエンドのjavascript / jqueryからの反応コードと規則を学ぼうとしているので、これは私にとって新しいことです。

私がやりたいのは、css を取得し、css-loader を使用して最小化することですが、読んだことからこれを行う方法がわかりません。

現在のコードの一部は次のようになります - prod.config.js :

これを機能させる方法について提案するには、これで十分ですか？または、どこで詳細情報を入手できるかを提案してください。

ドキュメントには、次のような css を要求する必要があると書かれています: require("css-loader?minimize!./file.css")

しかし、実装方法がわかりません。

ありがとう！

アップデート：

したがって、@Brandonが言及したことを試した後、私は実際にエントリにcssファイルを必要とするコードを見ました。

それを次のように更新しました: require('css-loader?minimize!styles/app.css'); しかし、このエラーで終わった：

しかし、その単語は@importです。これは意味がありますか? このエラーが表示される理由を教えていただければ幸いです。

再度、感謝します！

私は Angular2+ES2015+Babel+Webpack プロジェクトに取り組んでおり、CSS ファイルに画像を含めて を使用しているときにこの問題に遭遇しました。問題を探すcss-loaderのに何時間もかかりましたが、今のところ運がありません:

エラーを検索すると、githubの問題とstackoverflowで同様の状況が見つかりますが、まったく同じではありません. それらのすべてで、画像ローダーの欠如が指摘されています（pngファイルはこちら）が、私の場合は完全に機能しています。直接 JS ファイル上にある場合は、ロードされて出力パスにエクスポートされます!require('../image/penguin.png')

私のプロセスと Webpack の構成は非常に複雑で大きく、異なるファイルに分割されていますが、興味深い部分は次のとおりです。

そして、ここでエラーをトリガーするCSSの一部

to-string-loaderCSSに使用するのが奇妙に見える場合は、 angular2-template-loaderCSS を Angular2 Componet に直接インライン化できるためです。stylesUrl

エラースタックのため、css-loader がジョブを完了すると、png ファイルは定義されたローダー (url!image-webpack) でロードされていないように見えますが、babel-register でロードされますか? だから私console.logはcss-loaderからの結果であり、期待される画像がありますrequire:

だから私はbabelにpngファイルを無視させました

そして、babelは画像を無視しているため、これはわずかに異なるエラーをスローしますが、最終的には同じようです:

私は手がかりがなくて立ち往生しています.WTFは、CSSファイルに画像の背景を設定するだけで簡単にできるはずです.

何かご意見は？？

サードパーティの反応コンポーネントを使用していますが、sass を正しく設定できません。このコンポーネントは一連の<li>html タグを作成し、そのうちの 1 つ<li>がクリックされると、その項目に「アクティブな」クラス名を追加します: <li class="active">. そのアクティブな <li>要素の css をカスタマイズしたいと思います。これを行うために、次の内容を含む Test.scss ファイルを作成しました。

このスタイリングを使用するには、次のように反応します

問題は、Webpack がこの Sass ファイルをロードするときに、各ローカル .sass ファイルの各クラス名を次の形式に変換するcss-loaderを使用することです: "localIdentName=[name]_[local]__[hash:base64:5] "。つまり、私の CSS はもはや a に適用されません<li class="active">。代わりに、 で機能するようになりました<li classname="Test__active___2LBGS">。これまでに2つの（悪い）解決策を考えました：

1. localIdentName を使用して特定の css クラス名の名前を変更しないように、どうにかして webpack を再構成します
2. どういうわけか<ReactTags />クラス名を使用するようになりました: Test__active___2LBGS

これらのどちらも実現可能とは思えないので、かなり行き詰まっています!! どんな助けでも大歓迎です。

ノードをフロント エンド ビルド ツールとして使用する方法を学んでおり、ブートストラップを CSS バンドル ファイルに含めて Web ページに含めるのに苦労しています。

私は LESS 用のローダーと CSS 用のローダー、そして FONTS 用のローダーを持っており、自分のソースからそれらのいずれかを要求すると、CSS をバンドル ファイルに適切に変換するように見えますが、

また

webpack 中に次のエラーが発生します。

バンドルから bootstrap.css をチェックアウトしたところ、行 7、char5 は、完全に有効な CSS であるブロック コメントの後の、ファイル内の html と { 最初の css ルールの間の " " スペースのようです... ? そのファイルのコンテンツ全体をローカル ソース ファイル (common/style.less) の 1 つにコピーすることもできます。これは問題なく解析され、バンドルに含まれます。node_modules の場所からそれを含めることはできません。なんで？

私の app.js エントリ ポイントは次のようになります。

webpack.config.js:

会社用のパターン ライブラリを作成しようとしています。次のソフトウェアを使用しています。

• css-loader@0.23.1
• extract-text-webpack-plugin@1.0.1
• node-sass@3.8.0
• sass-loader@4.0.0
• style-loader@0.13.1
• webpack@1.13.2
• resolve-url-loader@1.6.0
• node@6.3.1
• npm@3.10.3

私のコンピューター（Windows 10）で。

私の目標は、@import "colors"ステートメントを使用して、対応するファイルを取得することです../patterns/globals/_colors.css。includePathssass-loader と resolve-url-loader を property で設定してみましたroot。しかし、どちらも今のところ機能していません...

sass-loader と includePaths を使用した最初の実行で、次のエラー レポートが表示されました。

resolve-url-loader を 2 回実行した後、別のエラー レポートが表示されました。

II は、次の内容で単純な sass をコンパイルしようとします。

上記の webpack 構成では、エラー メッセージは表示されませんが、次のような無効な CSS コードが表示されます。

失敗の原因がどこにあるのかわかりません。

敬具、JBrieske

編集: @IRus の助けを借りて、問題を解決できました。

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

次の webpack 構成があります。

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

そして私のsassファイル：

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

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

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