問題タブ [css-loader]

そのため、 http: //webpack.github.io/docs/tutorials/getting-started/ のチュートリアルに従っていましたが、css スタイル ローダーのステップで行き詰まりました。ここに私のentry.jsがあります：

これは content.js です:

これはstyle.cssです：

この後、次のコマンドを実行しています。

webpack ./entry.js bundle.js

このエラーが発生しています：

バージョン: webpack 1.13.0 時間: 866ms アセット サイズ チャンク チャンク名 bundle.js 10.1 kB 0 [発行] メイン [0] ./entry.js 115 バイト {0} [ビルド] [4] ./content.js 45 バイト{0} [ビルド済み] + 3 つの隠しモジュール

./~/css-loader!./style.css モジュールのビルドに失敗しました: ReferenceError: Promise が LazyResult.async で定義されていません (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib /lazy-result.js:157:31) で LazyResult.then (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:79:21) で processCss ( /var/www/html/webpack/node_modules/css-loader/lib/processCss.js:198:5) Object.module.exports (/var/www/html/webpack/node_modules/css-loader/lib/loader) .js:24:2) @ ./~/style-loader!./~/css-loader!./style.css 4:14-73

これを修正する方法は？

ソースマップを css-loader で動作させるのに苦労しています。

コンソールでの出力:

css-loader のドキュメントの内容:

ソースマップ

SourceMap を含めるには、sourceMap クエリ パラメータを設定します。

require("css-loader?sourceMap!./file.css")

私のwebpack.config

サスを含める方法

シンプルなランディング ページがあり、webpack を使用しました。-pそれを表すフラグを指定してwebpackを実行すると-optimize-minimize、FirefoxでCSSグラデーションが壊れます。滑らかな色の変化の代わりに、きつい縞が見えます。

cssnano モジュールを使用したフード css-loader の下。

この問題の原因は何ですか？

ありがとう、

フォルダーが次のように構成されているアプリがあります。

myapp.css特別なことは何もない、シンプルでプレーンな CSS です。それが機能しているかどうかを確認するためのスタイリングbodyです。そして私のwebpack.config.jsファイルにはこれがあります：

必要な css ファイルをindex.js次のように配置しました。

アセットの単語の前に ../ を追加するなど、すべての方法でロードを試みましたが、コンソールで次のエラーが表示され続けます。 Error: Cannot find module "assets/css/myapp.css"

私は二重チェックをしてcss-loaderおりstyle-loader、両方とも/node_modulesフォルダーにあります。

私は何を間違っていますか？数十のチュートリアルをチェックして 3 時間以上立ち往生しており、指定されたすべてを完了しました。助けてくれてありがとう！

私は反応を使用していますが、classNames と呼ばれるコンポーネントの css クラスを定義するのに役立つこの素晴らしいライブラリを見つけました。また、css をコンポーネントにインポートするために webpack css-loader を使用しています。インポート css で classNames を使用しようとすると、構文エラーが発生します。

これが私の例です：

どうすれば両方を使用できますか?