Webpack パッケージ化 CSS でエラーが発生した場合の対処方法

webpack パッケージ CSS エラーの解決策: 1. webpack2 の構文を「-loader」に変更します; 2. 「style-loader」を追加します; 3. 順序を「style-loader!css-loader;」に変更します。 」。

#この記事の動作環境: Windows7 システム、webpack2.0&&css3 バージョン、Dell G3 コンピューター。

問題: webpack は正常にパッケージ化されましたが、css エラーが発生し、CSS が機能しません

問題分析/解決策: 理由は次のとおりです

構文を使用しますwebpack2 のルールが間違っています; webpack2 では -loader を記述する必要があります;

css-loader のみが記述され、style-loader が記述されていない可能性があります;

順序が逆ですstyle-loader!css-loader;

Extension:

Question:style-loader または css-loader が記述されていない場合はどうなりますか;

として記述する必要があります。回答:

style-loader を記述しないと、ビルド ファイルは生成されますが、ページ内の js が動作しないことがわかります;

css-loader を記述しない場合、 「このファイル タイプを処理するには、適切なローダーが必要になる可能性があります。」というエラーが直接報告されます。

Q: style-loader と css-loader の機能は何ですか?

回答:

スタイルローダーは動作せず、エラーも報告しません。つまり、スタイルローダーの機能はスタイルを DOM 要素に挿入することです。これを、インターネットでプレビュー ページを観察すると、style -loader はページのヘッダー タグに内部 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927;

を生成します。css-loader はエラーを報告します。 Webpack のビルド プロセスに影響します。オンライン共有と「このファイル タイプを処理するには、適切なローダーが必要になる可能性があります。」エラー メッセージを組み合わせると、css-loader の存在により、require または import を通じて js に CSS を正常に導入できることを意味します。 js ファイルで実装できます。 require を通じて css を導入します。

私の構成ファイル

const webpack = require('webpack');
const path = require('path');
module.exports = {
   entry: {
       'bundle': './a.js',
   },
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       chunkFilename: '[name].js'
   },
   module: {
       loaders: [
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader'
           },
           {
               test: /\.js[x]?$/,
               exclude: 'node_modules/',
               loader: 'babel-loader'
           }
       ]
   },
 plugins: [
  ]
};

推奨: 「

css ビデオ チュートリアル 」

以上がWebpack パッケージ化 CSS でエラーが発生した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。