css-loader

免責事項 css-loaderはコミュニティメンバーによってメンテナンスされているサードパーティパッケージであり、webpackと同じサポート、セキュリティポリシー、ライセンスを持っていない可能性があり、webpackによってメンテナンスされていません。

css-loader は、@import および url() を import/require() のように解釈し、それらを解決します。

はじめに

警告
css-loaderの最新バージョンを使用するには、webpack@5が必要です

まず、css-loader をインストールする必要があります

npm install --save-dev css-loader

または

yarn add -D css-loader

または

pnpm add -D css-loader

次に、プラグインをwebpack構成に追加します。例:

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

そして、お好みの方法でwebpackを実行します。

何らかの理由で、CSSをファイルとして抽出する必要がある場合（つまり、CSSをJSモジュールに保存しない場合）、推奨例を確認することをお勧めします。

オプション

url
import
modules
sourceMap
importLoaders
esModule
exportType

`url`

タイプ

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

デフォルト: true

CSS関数urlおよびimage-setの処理を有効/無効にします。falseに設定した場合、css-loaderはurlまたはimage-setで指定されたパスを解析しません。関数を渡して、アセットへのパスに基づいてこの動作を動的に制御することもできます。バージョン4.0.0以降、絶対パスはサーバーのルートに基づいて解析されます。

解決例

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

node_modulesパス（resolve.modulesを含む）およびaliasからアセットをインポートするには、~をプレフィックスとして付けます

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

`boolean`

url()解決を有効/無効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

`object`

url()をフィルタリングできるようにします。フィルタリングされたすべてのurl()は解決されません（記述されたとおりにコードに残されます）。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: {
            filter: (url, resourcePath) => {
              // resourcePath - path to css file

              // Don't handle `img.png` urls
              if (url.includes("img.png")) {
                return false;
              }

              // Don't handle images under root-relative /external_images/
              if (/^\/external_images\//.test(path)) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

`import`

タイプ

type importFn =
  | boolean
  | {
      filter: (
        url: string,
        media: string,
        resourcePath: string,
        supports?: string,
        layer?: string
      ) => boolean;
    };

デフォルト: true

@import at-ruleの処理を有効/無効にします。@importの解決を制御します。@importの絶対URLは、ランタイムコードに移動されます。

解決例

@import 'style.css' => require('./style.css')
@import url(style.css) => require('./style.css')
@import url('style.css') => require('./style.css')
@import './style.css' => require('./style.css')
@import url(./style.css) => require('./style.css')
@import url('./style.css') => require('./style.css')
@import url('http://dontwritehorriblecode.com/style.css') => @import url('http://dontwritehorriblecode.com/style.css') in runtime

node_modulesパス（resolve.modulesを含む）およびaliasからスタイルをインポートするには、~をプレフィックスとして付けます。

@import url(~module/style.css) => require('module/style.css')
@import url('~module/style.css') => require('module/style.css')
@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')

`boolean`

@importの解決を有効/無効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          import: true,
        },
      },
    ],
  },
};

`object`

`filter`

タイプ

type filter = (url: string, media: string, resourcePath: string) => boolean;

デフォルト: undefined

@importをフィルタリングできるようにします。フィルタリングされたすべての@importは解決されません（記述されたとおりにコードに残されます）。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          import: {
            filter: (url, media, resourcePath) => {
              // resourcePath - path to css file

              // Don't handle `style.css` import
              if (url.includes("style.css")) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

`modules`

タイプ

type modules =
  | boolean
  | "local"
  | "global"
  | "pure"
  | "icss"
  | {
      auto: boolean | regExp | ((resourcePath: string) => boolean);
      mode:
        | "local"
        | "global"
        | "pure"
        | "icss"
        | ((resourcePath) => "local" | "global" | "pure" | "icss");
      localIdentName: string;
      localIdentContext: string;
      localIdentHashSalt: string;
      localIdentHashFunction: string;
      localIdentHashDigest: string;
      localIdentRegExp: string | regExp;
      getLocalIdent: (
        context: LoaderContext,
        localIdentName: string,
        localName: string
      ) => string;
      namedExport: boolean;
      exportGlobals: boolean;
      exportLocalsConvention:
        | "asIs"
        | "camelCase"
        | "camelCaseOnly"
        | "dashes"
        | "dashesOnly"
        | ((name: string) => string);
      exportOnlyLocals: boolean;
    };

デフォルト: undefined

CSSモジュールまたはICSSを有効/無効にし、構成を設定できるようにします

undefined - /\.module\.\w+$/i.test(filename)および/\.icss\.\w+$/i.test(filename)正規表現に一致するすべてのファイルに対してCSSモジュールを有効にします。
true - すべてのファイルに対してCSSモジュールを有効にします。
false - すべてのファイルに対してCSSモジュールを無効にします。
string - すべてのファイルで CSS Modules を無効にし、mode オプションを設定します。詳細についてはこちらを参照してください。
object - すべてのファイルで CSS Modules を有効にします。modules.auto オプションが指定されていない場合は、そうでなければ modules.auto オプションが CSS Modules かどうかを決定します。詳細についてはこちらを参照してください。

modules オプションは、CSS Modules 仕様を有効/無効にし、基本的な動作を設定します。

false 値を使用すると、CSS Modules 機能の解析を回避するためパフォーマンスが向上します。これは、プレーンな CSS を使用する開発者や他の技術を使用する開発者にとって役立ちます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: true,
        },
      },
    ],
  },
};

`機能`

`スコープ`

local 値を使用する場合は、:global クラスを指定する必要があります。global 値を使用する場合は、:local クラスを指定する必要があります。pure 値を使用する場合は、セレクターに少なくとも 1 つのローカルクラスまたは ID が含まれている必要があります。

詳細についてはこちらを参照してください。

スタイルをグローバルにスコープ設定することを避けるために、ローカルにスコープ設定できます。

構文 :local(.className) を使用して、ローカルスコープで className を宣言できます。ローカル識別子はモジュールによってエクスポートされます。

:local（括弧なし）を使用すると、このセレクターのローカルモードをオンにできます。:global(.className) 表記を使用して、明示的なグローバルセレクターを宣言できます。:global（括弧なし）を使用すると、このセレクターのグローバルモードをオンにできます。

ローダーは、ローカルセレクターを一意の識別子に置き換えます。選択された一意の識別子は、モジュールによってエクスポートされます。

:local(.className) {
  background: red;
}
:local .className {
  color: green;
}
:local(.className .subClass) {
  color: green;
}
:local .className .subClass :global(.global-class-name) {
  color: blue;
}

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
}
._23_aKvs-b8bW2Vg3fwHozO {
  color: green;
}
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 {
  color: green;
}
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name {
  color: blue;
}

注記
識別子がエクスポートされます

exports.locals = {
  className: "_23_aKvs-b8bW2Vg3fwHozO",
  subClass: "_13LGdX8RMStbBE9w-t0gZ1",
};

ローカルセレクターにはキャメルケースの使用をお勧めします。インポートされた JS モジュール内で使いやすくなります。

:local(#someId) を使用できますが、推奨されません。ID の代わりにクラスを使用してください。

`構成`

ローカルクラス名を宣言するときに、別のローカルクラス名からローカルクラスを構成できます。

:local(.className) {
  background: red;
  color: yellow;
}

:local(.subClass) {
  composes: className;
  background: blue;
}

これにより、CSS 自体に変更は加えられませんが、複数のクラス名がエクスポートされます。

exports.locals = {
  className: "_23_aKvs-b8bW2Vg3fwHozO",
  subClass: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",
};

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
  color: yellow;
}

._13LGdX8RMStbBE9w-t0gZ1 {
  background: blue;
}

`インポート`

別のモジュールからローカルクラス名をインポートするには。

注記
任意の拡張子を持つファイルをインポートすることは可能であり、どのファイルを使用するかは事前にわからないため、ファイルをインポートするときは拡張子を指定することを強くお勧めします。

:local(.continueButton) {
  composes: button from "library/button.css";
  background: red;
}

:local(.nameEdit) {
  composes: edit highlight from "./edit.css";
  background: red;
}

複数のモジュールからインポートするには、複数の composes: ルールを使用します。

:local(.className) {
  composes: edit highlight from "./edit.css";
  composes: button from "module/button.css";
  composes: classFromThisModule;
  background: red;
}

`値`

@value を使用して、ドキュメント全体で再利用される値を指定できます。

値には v-、セレクターには s-、メディア at ルールには m- をプレフィックスとして使用することをお勧めします。

@value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);

.header {
  color: v-primary;
  padding: 0 10px;
}

.s-black {
  color: black;
}

@media m-large {
  .header {
    padding: 0 20px;
  }
}

`boolean`

CSS Modules 機能を有効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: true,
        },
      },
    ],
  },
};

`string`

CSS Modules 機能を有効にし、mode を設定します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          // Using `local` value has same effect like using `modules: true`
          modules: "global",
        },
      },
    ],
  },
};

`object`

CSS Modules 機能を有効にし、それらのオプションを設定します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            mode: "local",
            auto: true,
            exportGlobals: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
            localIdentContext: path.resolve(__dirname, "src"),
            localIdentHashSalt: "my-custom-hash",
            namedExport: true,
            exportLocalsConvention: "camelCase",
            exportOnlyLocals: false,
          },
        },
      },
    ],
  },
};

`auto`

タイプ

type auto =
  | boolean
  | regExp
  | ((
      resourcePath: string,
      resourceQuery: string,
      resourceFragment: string
    ) => boolean);

デフォルト: undefined

modules オプションがオブジェクトの場合、ファイル名、クエリ、またはフラグメントに基づいて CSS モジュール/ICSS を自動的に有効にできます。

指定可能な値

undefined - すべてのファイルで CSS Modules を有効にします。
true - /\.module\.\w+$/i.test(filename) および /\.icss\.\w+$/i.test(filename) 正規表現に一致するすべてのファイルで CSS Modules を有効にします。
false - CSS Modules を無効にします。
RegExp - /RegExp/i.test(filename) 正規表現に一致するすべてのファイルで CSS Modules を有効にします。
function - フィルター関数チェックを満たすファイル名に基づいて、ファイルに対して CSS Modules を有効にします。

`boolean`

指定可能な値

true - CSS モジュールまたは相互運用可能な CSS 形式を有効にし、/\.module(s)?\.\w+$/i.test(filename) 条件を満たすすべてのファイルに対してmodules.mode オプションを local 値に設定するか、/\.icss\.\w+$/i.test(filename) 条件を満たすすべてのファイルに対してmodules.mode オプションを icss 値に設定します
false - ファイル名に基づいて CSS モジュールまたは相互運用可能な CSS 形式を無効にします

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: true,
          },
        },
      },
    ],
  },
};

`RegExp`

正規表現チェックを満たすファイル名に基づいて、ファイルに対して CSS Modules を有効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: /\.custom-module\.\w+$/i,
          },
        },
      },
    ],
  },
};

`function`

フィルター関数チェックを満たすファイル名、クエリ、またはフラグメントに基づいて、ファイルに対して CSS Modules を有効にします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: (resourcePath, resourceQuery, resourceFragment) => {
              return resourcePath.endsWith(".custom-module.css");
            },
          },
        },
      },
    ],
  },
};

`mode`

タイプ

type mode =
  | "local"
  | "global"
  | "pure"
  | "icss"
  | ((
      resourcePath: string,
      resourceQuery: string,
      resourceFragment: string
    ) => "local" | "global" | "pure" | "icss");

デフォルト: 'local'

mode オプションを設定します。local モードが必要な場合は、値を省略できます。

入力スタイルに適用されるコンパイルのレベルを制御します。

local、global、および pure は、class および id スコーピングと @value 値を処理します。icss は、CSS と他の言語間の :import および :export 依存関係を宣言するための低レベルの Interoperable CSS 形式のみをコンパイルします。

ICSS は CSS モジュールサポートを支え、他のツールが独自の CSS モジュールバリエーションを実装するための低レベルの構文を提供します。

`string`

可能な値 - local、global、pure、および icss。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            mode: "global",
          },
        },
      },
    ],
  },
};

`function`

ファイル名、クエリ、またはフラグメントに基づいて、mode オプションに異なる値を設定できます。

可能な戻り値 - local、global、pure、および icss。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            // Callback must return "local", "global", or "pure" values
            mode: (resourcePath, resourceQuery, resourceFragment) => {
              if (/pure.css$/i.test(resourcePath)) {
                return "pure";
              }

              if (/global.css$/i.test(resourcePath)) {
                return "global";
              }

              return "local";
            },
          },
        },
      },
    ],
  },
};

`localIdentName`

タイプ

type localIdentName = string;

デフォルト: '[hash:base64]'

生成されるローカル識別名を設定できます。

オプションの詳細については、以下を参照してください

サポートされるテンプレート文字列

[name] リソースのベース名
[folder] compiler.context オプションまたは modules.localIdentContext オプションを基準としたリソースのフォルダー。
[path] compiler.context オプションまたは modules.localIdentContext オプションを基準としたリソースのパス。
[file] - ファイル名とパス。
[ext] - 先頭に . を付けた拡張子。
[hash] - localIdentHashSalt、localIdentHashFunction、localIdentHashDigest、localIdentHashDigestLength、localIdentContext、resourcePath、および exportName に基づいて生成された文字列のハッシュ
[<hashFunction>:hash:<hashDigest>:<hashDigestLength>] - ハッシュ設定付きのハッシュ。
[local] - 元のクラス。

推奨事項

開発には '[path][name]__[local]' を使用
本番環境には '[hash:base64]' を使用

[local] プレースホルダーには、元のクラスが含まれます。

注:予約済み文字 (<>:"/\|?*) および制御ファイルシステムの文字 ([local] プレースホルダーの文字を除く) は - に変換されます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
          },
        },
      },
    ],
  },
};

`localIdentContext`

タイプ

type localIdentContex = string;

デフォルト: compiler.context

ローカル識別名の基本ローダーコンテキストを再定義できます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentContext: path.resolve(__dirname, "src"),
          },
        },
      },
    ],
  },
};

`localIdentHashSalt`

タイプ

type localIdentHashSalt = string;

デフォルト: undefined

より一意なクラスを生成するために、カスタムハッシュを追加できます。詳細については、output.hashSalt を参照してください。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashSalt: "hash",
          },
        },
      },
    ],
  },
};

`localIdentHashFunction`

タイプ

type localIdentHashFunction = string;

デフォルト: md4

クラスを生成するためのハッシュ関数を指定できます。詳細については、output.hashFunction を参照してください。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashFunction: "md4",
          },
        },
      },
    ],
  },
};

`localIdentHashDigest`

タイプ

type localIdentHashDigest = string;

デフォルト: hex

クラスを生成するためのハッシュダイジェストを指定できます。詳細については、output.hashDigest を参照してください。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashDigest: "base64",
          },
        },
      },
    ],
  },
};

`localIdentHashDigestLength`

タイプ

type localIdentHashDigestLength = number;

デフォルト: 20

クラスを生成するためのハッシュダイジェストの長さを指定できます。詳細については、output.hashDigestLength を参照してください。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashDigestLength: 5,
          },
        },
      },
    ],
  },
};

`hashStrategy`

タイプ: 'resource-path-and-local-name' | 'minimal-subset' デフォルト: 'resource-path-and-local-name'

ハッシュを計算するときにローカル名を使用する必要がありますか。

'resource-path-and-local-name' ハッシュ時に、リソースパスとローカル名の両方が使用されます。モジュール内の各識別子は、常に独自のハッシュダイジェストを取得します。
'minimal-subset' 識別子名をハッシュから省略できるかどうかを自動検出します。この値を使用して、GZIP または Brotli 圧縮を改善するために出力を最適化します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            hashStrategy: "minimal-subset",
          },
        },
      },
    ],
  },
};

`localIdentRegExp`

タイプ

type localIdentRegExp = string | RegExp;

デフォルト: undefined

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentRegExp: /page-(.*)\.css/i,
          },
        },
      },
    ],
  },
};

`getLocalIdent`

タイプ

type getLocalIdent = (
  context: LoaderContext,
  localIdentName: string,
  localName: string
) => string;

デフォルト: undefined

クラス名を生成する関数を指定できます。デフォルトでは、組み込み関数を使用してクラス名を生成します。カスタム関数が null または undefined を返す場合、組み込み関数にフォールバックしてクラス名を生成します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            getLocalIdent: (context, localIdentName, localName, options) => {
              return "whatever_random_class_name";
            },
          },
        },
      },
    ],
  },
};

`namedExport`

タイプ

type namedExport = boolean;

デフォルト: false

ローカルの ES モジュール名前付きエクスポートを有効/無効にします。

警告
ローカルの名前はキャメルケースに変換されます。つまり、exportLocalsConvention オプションのデフォルト値は camelCaseOnly です。これを他の有効なオプションに戻すことができますが、モジュール仕様全体を実装していないと、有効な JavaScript 識別子ではないセレクターで問題が発生する可能性があります。

警告
exportLocalsConvention が "asIs" でない限り、css クラス名で JavaScript の予約語を使用することは許可されていません。

styles.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

index.js

import * as styles from "./styles.css";

console.log(styles.fooBaz, styles.bar);
// or if using `exportLocalsConvention: "asIs"`:
console.log(styles["foo-baz"], styles.bar);

次のものを使用して、ES モジュール名前付きエクスポートを有効にできます

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: true,
          modules: {
            namedExport: true,
          },
        },
      },
    ],
  },
};

namedExport のカスタム名を設定するには、exportLocalsConvention オプションを関数として使用できます。以下の例セクションの例を参照してください。

`exportGlobals`

タイプ

type exportsGLobals = boolean;

デフォルト: false

css-loader がグローバルクラスまたは ID から名前をエクスポートできるようにして、それをローカル名として使用できるようにします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportGlobals: true,
          },
        },
      },
    ],
  },
};

`exportLocalsConvention`

タイプ

type exportLocalsConvention =
  | "asIs"
  | "camelCase"
  | "camelCaseOnly"
  | "dashes"
  | "dashesOnly"
  | ((name: string) => string);

デフォルト: modules.namedExport オプションの値に基づく。true の場合は camelCaseOnly、それ以外の場合は asIs

エクスポートされたクラス名のスタイル。

`string`

デフォルトでは、エクスポートされた JSON キーはクラス名を反映します (つまり、asIs 値)。

名前	タイプ	説明
`'asIs'`	`string`	クラス名はそのままエクスポートされます。
`'camelCase'`	`string`	クラス名はキャメルケース化され、元のクラス名はローカルから削除されません
`'camelCaseOnly'`	`string`	クラス名はキャメルケース化され、元のクラス名はローカルから削除されます
`'dashes'`	`string`	クラス名内のダッシュのみがキャメルケース化されます
`'dashesOnly'`	`string`	クラス名内のダッシュがキャメルケース化され、元のクラス名はローカルから削除されます

file.css

.class-name {
}

file.js

import { className } from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: "camelCase",
          },
        },
      },
    ],
  },
};

`function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: function (name) {
              return name.replace(/-/g, "_");
            },
          },
        },
      },
    ],
  },
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: function (name) {
              return [
                name.replace(/-/g, "_"),
                // dashesCamelCase
                name.replace(/-+(\w)/g, (match, firstLetter) =>
                  firstLetter.toUpperCase()
                ),
              ];
            },
          },
        },
      },
    ],
  },
};

`exportOnlyLocals`

タイプ

type exportOnlyLocals = boolean;

デフォルト: false

ローカルのみをエクスポートします。

css modules を使用してプリレンダリング（例えば SSR）を行う場合に便利です。mini-css-extract-plugin を使用したプリレンダリングでは、プリレンダリングバンドル内で style-loader!css-loader の代わりにこのオプションを使用する必要があります。これは CSS を埋め込むのではなく、識別子のマッピングのみをエクスポートします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportOnlyLocals: true,
          },
        },
      },
    ],
  },
};

`importLoaders`

タイプ

type importLoaders = number;

デフォルト: 0

@import at-rules、CSS モジュール、ICSS インポート（つまり、@import/composes/@value value from './values.css'/etc）に対して、CSS ローダーの前に適用されるローダーの数を有効/無効化または設定できます。

オプション importLoaders を使用すると、css-loader の前に @import されたリソースと CSS モジュール/ICSS インポートに適用されるローダーの数を設定できます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            },
          },
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

モジュールシステム（つまり webpack）がオリジンによるローダーマッチングをサポートすると、これは将来変更される可能性があります。

`sourceMap`

タイプ

type sourceMap = boolean;

デフォルト: compiler.devtool の値に依存

デフォルトでは、ソースマップの生成は devtool オプションに依存します。eval および false 値を除くすべての値でソースマップの生成が有効になります。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          sourceMap: true,
        },
      },
    ],
  },
};

`esModule`

タイプ

type esModule = boolean;

デフォルト: true

デフォルトでは、css-loader は ES モジュール構文を使用する JS モジュールを生成します。モジュール連結やツリーシェイキングの場合など、ES モジュールを使用することが有益な場合があります。

次の設定を使用して、CommonJS モジュール構文を有効にできます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
};

`exportType`

タイプ

type exportType = "array" | "string" | "css-style-sheet";

デフォルト: 'array'

スタイルをモジュール、文字列、または構築可能なスタイルシート（つまり、CSSStyleSheet）として配列でエクスポートできます。デフォルト値は 'array' で、つまりローダーは style-loader または他のローダーで使用される特定の API を持つモジュールの配列をエクスポートします。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        assert: { type: "css" },
        loader: "css-loader",
        options: {
          exportType: "css-style-sheet",
        },
      },
    ],
  },
};

src/index.js

import sheet from "./styles.css" assert { type: "css" };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

`'array'`

デフォルトのエクスポートは、style-loader または他のローダーで使用される特定の API を持つモジュールの配列です。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
};

src/index.js

// `style-loader` applies styles to DOM
import "./styles.css";

`'string'`

警告
この値を使用する場合、style-loader または mini-css-extract-plugin を使用しないでください。

警告
CSS modules で使用する場合は、esModule オプションを有効にする必要があります。デフォルトでは、ローカルには名前付きエクスポートが使用されます。

デフォルトのエクスポートは string です。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: ["css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
};

src/index.js

import sheet from "./styles.css";

console.log(sheet);

`'css-style-sheet'`

警告
@import ルールはまだ許可されていません。詳細については、こちらをご覧ください。

警告
style-loader は不要になったため、削除してください。

警告
CSS modules で使用する場合は、esModule オプションを有効にする必要があります。デフォルトでは、ローカルには名前付きエクスポートが使用されます。

警告
ソースマップは現在、Chrome ではバグのためサポートされていません。

デフォルトのエクスポートは、構築可能なスタイルシート（つまり、CSSStyleSheet）です。

カスタム要素やシャドウ DOM に役立ちます。

詳細情報

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        assert: { type: "css" },
        loader: "css-loader",
        options: {
          exportType: "css-style-sheet",
        },
      },

      // For Sass/SCSS:
      //
      // {
      //   assert: { type: "css" },
      //   rules: [
      //     {
      //       loader: "css-loader",
      //       options: {
      //         exportType: "css-style-sheet",
      //         // Other options
      //       },
      //     },
      //     {
      //       loader: "sass-loader",
      //       options: {
      //         // Other options
      //       },
      //     },
      //   ],
      // },
    ],
  },
};

src/index.js

// Example for Sass/SCSS:
// import sheet from "./styles.scss" assert { type: "css" };

// Example for CSS modules:
// import sheet, { myClass } from "./styles.scss" assert { type: "css" };

// Example for CSS:
import sheet from "./styles.css" assert { type: "css" };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

移行目的のために、次の設定を使用できます

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        oneOf: [
          {
            assert: { type: "css" },
            loader: "css-loader",
            options: {
              exportType: "css-style-sheet",
              // Other options
            },
          },
          {
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  // Other options
                },
              },
            ],
          },
        ],
      },
    ],
  },
};

例

推奨

production ビルドでは、後で CSS/JS リソースの並列読み込みを使用できるように、バンドルから CSS を抽出することをお勧めします。これは、個別の css ファイルを作成するmini-css-extract-pluginを使用することで実現できます。development モード（webpack-dev-server を含む）では、複数の <style></style> を使用して DOM に CSS を挿入し、高速に動作する style-loader を使用できます。

注記
style-loader と mini-css-extract-plugin を一緒に使用しないでください。

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  module: {
    rules: [
      {
        // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
        // type: "javascript/auto",
        test: /\.(sa|sc|c)ss$/i,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
};

`/* webpackIgnore: true */` コメントを使用して URL 解決を無効にする

/* webpackIgnore: true */ コメントを使用すると、ルールと個々の宣言に対してソース処理を無効にすることができます。

/* webpackIgnore: true */
@import url(./basic.css);
@import /* webpackIgnore: true */ url(./imported.css);

.class {
  /* Disabled url handling for the all urls in the 'background' declaration */
  color: red;
  /* webpackIgnore: true */
  background: url("./url/img.png"), url("./url/img.png");
}

.class {
  /* Disabled url handling for the first url in the 'background' declaration */
  color: red;
  background:
    /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
}

.class {
  /* Disabled url handling for the second url in the 'background' declaration */
  color: red;
  background: url("./url/img.png"),
    /* webpackIgnore: true */ url("./url/img.png");
}

/* prettier-ignore */
.class {
  /* Disabled url handling for the second url in the 'background' declaration */
  color: red;
  background: url("./url/img.png"),
    /* webpackIgnore: true */
    url("./url/img.png");
}

/* prettier-ignore */
.class {
  /* Disabled url handling for third and sixth urls in the 'background-image' declaration */
  background-image: image-set(
    url(./url/img.png) 2x,
    url(./url/img.png) 3x,
    /* webpackIgnore:  true */ url(./url/img.png) 4x,
    url(./url/img.png) 5x,
    url(./url/img.png) 6x,
    /* webpackIgnore:  true */
    url(./url/img.png) 7x
  );
}

アセット

次の webpack.config.js は、CSS ファイルを読み込み、小さな PNG/JPG/GIF/SVG 画像とフォントを Data URLs として埋め込み、より大きなファイルをアウトプットディレクトリにコピーできます。

webpack v5 の場合

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        // More information here https://webpack.dokyumento.jp/guides/asset-modules/
        type: "asset",
      },
    ],
  },
};

抽出

production ビルドでは、後で CSS/JS リソースの並列読み込みを使用できるように、バンドルから CSS を抽出することをお勧めします。

これは、production モードで実行しているときに CSS を抽出するために、mini-css-extract-pluginを使用することで実現できます。
代替案として、より優れた開発パフォーマンスと本番環境を模倣した CSS 出力を求める場合は、extract-css-chunks-webpack-plugin が、ホットモジュールリロードに対応した、mini-css-extract-plugin の拡張版を提供します。開発環境では実際の CSS ファイルの HMR、非開発環境では mini-css のように動作します。

ピュア CSS、CSS モジュール、PostCSS

プロジェクトにピュア CSS（CSS モジュールなし）、CSS モジュール、PostCSS がある場合は、この設定を使用できます

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // For pure CSS - /\.css$/i,
        // For Sass/SCSS - /\.((c|sa|sc)ss)$/i,
        // For Less - /\.((c|le)ss)$/i,
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              // Run `postcss-loader` on each CSS `@import` and CSS modules/ICSS imports, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
              // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
            options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
          },
          // Can be `less-loader`
          {
            loader: "sass-loader",
          },
        ],
      },
      // For webpack v5
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        // More information here https://webpack.dokyumento.jp/guides/asset-modules/
        type: "asset",
      },
    ],
  },
};

エイリアスを使用して未解決の URL を解決する

index.css

.class {
  background: url(/assets/unresolved/img.png);
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    alias: {
      "/assets/unresolved/img.png": path.resolve(
        __dirname,
        "assets/real-path-to-img/img.png"
      ),
    },
  },
};

カスタムエクスポート名を使用した名前付きエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            namedExport: true,
            exportLocalsConvention: function (name) {
              return name.replace(/-/g, "_");
            },
          },
        },
      },
    ],
  },
};

`Interoperable CSS` のみと `CSS Module` の機能を分離する

次の設定は、*.module.scss の命名規則に一致しないすべてのファイルに対して mode オプションを設定することで、CSS Module の追加機能を使用せずに、Interoperable CSS 機能（:import や :export など）のみを許可する例です。これは、すべてのファイルに ICSS 機能が適用されることが v4 より前のデフォルトの css-loader の動作であったため、参考のために示しています。一方、この例では、*.module.scss に一致するすべてのファイルは CSS Modules として扱われます。

例として、キャンバス描画変数が CSS と同期する必要があるプロジェクトが想定されます。キャンバス描画では、HTML の背景（CSS のクラス名で設定）と同じ色（JavaScript の色名で設定）を使用します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      // ...
      // --------
      // SCSS ALL EXCEPT MODULES
      {
        test: /\.scss$/i,
        exclude: /\.module\.scss$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                mode: "icss",
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      // --------
      // SCSS MODULES
      {
        test: /\.module\.scss$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                mode: "local",
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      // --------
      // ...
    ],
  },
};

variables.scss

ICSS のみとして扱われるファイル。

$colorBackground: red;
:export {
  colorBackgroundCanvas: $colorBackground;
}

Component.module.scss

CSS Module として扱われるファイル。

@import "variables.scss";
.componentClass {
  background-color: $colorBackground;
}

Component.jsx

JavaScript で CSS Module 機能と SCSS 変数の両方を直接使用します。

import svars from "variables.scss";
import styles from "Component.module.scss";

// Render DOM with CSS modules class name
// <div className={styles.componentClass}>
//   <canvas ref={mountsCanvas}/>
// </div>

// Somewhere in JavaScript canvas drawing code use the variable directly
// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
ctx.fillStyle = `${svars.colorBackgroundCanvas}`;

貢献

まだの場合は、貢献に関するガイドラインを読んでください。

CONTRIBUTING

ライセンス

MIT

このページを編集·このページを印刷·リポジトリに移動

« 前へ

val-loader

less-loader

css-loader

はじめに

オプション

url

boolean

object

import

boolean

object

filter

modules

機能

スコープ

構成

インポート

値

boolean

string

object

auto

boolean

RegExp

function

mode

string

function

localIdentName

localIdentContext

localIdentHashSalt

localIdentHashFunction

localIdentHashDigest

localIdentHashDigestLength

hashStrategy

localIdentRegExp

getLocalIdent

namedExport

exportGlobals

exportLocalsConvention

string

function

exportOnlyLocals

importLoaders

sourceMap

esModule

exportType

'array'

'string'

'css-style-sheet'

例

推奨

/* webpackIgnore: true */ コメントを使用して URL 解決を無効にする

アセット

抽出

ピュア CSS、CSS モジュール、PostCSS

エイリアスを使用して未解決の URL を解決する

カスタムエクスポート名を使用した名前付きエクスポート

Interoperable CSS のみと CSS Module の機能を分離する

貢献

ライセンス

`url`

`boolean`

`object`

`import`

`boolean`

`object`

`filter`

`modules`

`機能`

`スコープ`

`構成`

`インポート`

`値`

`boolean`

`string`

`object`

`auto`

`boolean`

`RegExp`

`function`

`mode`

`string`

`function`

`localIdentName`

`localIdentContext`

`localIdentHashSalt`

`localIdentHashFunction`

`localIdentHashDigest`

`localIdentHashDigestLength`

`hashStrategy`

`localIdentRegExp`

`getLocalIdent`

`namedExport`

`exportGlobals`

`exportLocalsConvention`

`string`

`function`

`exportOnlyLocals`

`importLoaders`

`sourceMap`

`esModule`

`exportType`

`'array'`

`'string'`

`'css-style-sheet'`

`/* webpackIgnore: true */` コメントを使用して URL 解決を無効にする

`Interoperable CSS` のみと `CSS Module` の機能を分離する