CSSファイルをパッケージ化するにはどうすればよいですか? CSSファイルをパッケージ化する方法

この記事の内容は、css ファイルをパッケージ化する方法についてです。 CSS ファイルをパッケージ化する方法は、参考になると思います。

css ファイルのパッケージ化

ローダーは、webpack の最も重要な機能の 1 つです

ローダーは、モジュール module 内にあります

いくつかの簡単な使用例です。ローダーの:

• 他の変換ツールを使用せずに、SASS ファイルの記述を CSS に変換できます。

• ES6 または ES7 コードを、ほとんどのブラウザと互換性のある JS コードに変換できます。

• は、ReactのJSXをJavaScriptコードに変換できます。

注: すべてのローダーは npm に個別にインストールし、webpack.config.js で設定する必要があります。ローダーの構成タイプを簡単に確認してみましょう。

test: 処理されたファイルの拡張子と一致するために使用される式。
use: 使用するモジュールの名前であるこのオプションも設定する必要があります。エラーが報告されます。
include/exclude: 処理する必要があるファイル (フォルダー) を手動で追加するか、処理する必要のないファイル (フォルダー) をブロックします (オプション)
クエリ: ローダーの追加の設定オプションを提供します

CSS ファイルをパッケージ化する
src ディレクトリに css フォルダーを作成し、そのフォルダー内にindex.css ファイルを作成します。/src/css/index.css

 body{
      background-color: red;     
      color: white; 
      }

CSS ファイルを作成したら、その前にエントリ ファイルに導入する必要があります。パッケージ化できるので、ここではentry.jsに導入します。 /src/entery.js の最初の行にコードを追加します:

import css from './css/index.css';

CSS とインポートが完了したら、ローダーを使用する必要があります。 CSS ファイル (それぞれ style-loader と css-loader) を解析します。

style-loader: CSSファイルなどのurl()の処理に使用します。 npmでのURL: https://www.npmjs.com/package/style-loader

npmを使用しますプロジェクトのインストールのためにインストール: style-loader と css-loader をインストールするときは、コードが異なることに注意してください

npm install style-loader –save-dev

css-loader: Itページのスタイルタグに CSS を挿入するために使用されます。 npm の URL: https://www.npmjs.com/package/css-loader
npm install を使用してプロジェクトをインストールします:

npm install –save-dev css-loader

両方のローダーがダウンロードされ、インストールされていますその後、ローダーを構成できます。

ローダーの設定: webpack.config.js

module:{ 
    rules: [{ 
         test: /\.css$/, 
         use: [ 'style-loader', 'css-loader' ] 
     }] 
 },

モジュールに記述するには 3 つの方法があります 1. [ 'style-loader'、'css-loader'
2. style-loader','css-loader']
3,

use:[{
    loader:'style-loader'},{
    loader:'css-loader'}]

関連する推奨事項:

Web サイトに js および css ファイルをパッケージ化する

CSS 参照画像をパッケージ化した後、リソース ファイルが見つからない場合があります

以上がCSSファイルをパッケージ化するにはどうすればよいですか? CSSファイルをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。