スタイルシートの埋め込み

style-loaderとcss-loaderを使用することで、webpackのJavaScriptバンドルへのスタイルシートの埋め込みが可能になります。 この方法により、別のモジュールと一緒にスタイルシートをモジュール化し、 簡単にrequire("./stylesheet.css")することが可能になります。

インストール

npmからローダーをインストールします。

npm install style-loader css-loader --save-dev

設定

cssのrequire()を有効にするための設定例になります。

{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

For compile-to-css languages see the according loaders for configuration examples. You can pipe them…

モジュールの実行順を管理することが難しいため、順番に左右されないスタイルシートの設計が必要なことに注意してください。 (ただし、与えられるCSSファイルの順番を管理することは可能です。)

CSSの使用

// モジュール内でスタイルシートをrequireするだけです。
// これにはDOMへ<style>タグが追加される副作用があります。
require("./stylesheet.css");

CSSのバンドルを分割

extract-text-webpack-pluginと連携することで、 ネイティブなCSS出力ファイルを生成することが可能になります。

コード分割をする際に、我々は2つの異なるモードを使用することができます。

• イニシャル・チャンク(コード分割参照)毎に1つのCSSファイルを作成し、 追加(拡張)チャンクに対してスタイルシート埋め込みを行います。(推奨)
• イニシャル・チャンク毎に1つのCSSファイルを作成し、これに追加(拡張)チャンクのスタイルも含めます。

1つ目のモードは初回のページ読み込み時間の最適化に繋がるため推奨されています。 複数のエントリーポイントを持つ小さなアプリケーションであれば、 HTTPリクエストのオーバーヘッドとキャッシュの観点から、2つ目のモードのほうが有用かもしれません。

プラグインのインストール

npmからプラグインをインストールします。

npm install extract-text-webpack-plugin --save

general

プラグインを使用するために、特別なローダーを使用してCSSファイルに移動するべきモジュールのフラグ付けが必要になります。 To use the plugin you need to flag modules that should be moved into the css file with a special loader. webpackの最適化フェーズでのコンパイル後に、そのプラグインは抜き出すのが適切なモジュールなのかを確認します。 (1つ目のモードでは、これらはイニシャル・チャンク内に After the compilation in the optimizing phase of webpack the plugin checks which modules are relevant for extraction (in the first mode only these that are in an initial chunk). これらのモジュールは、node.jsでの使用と中身の取得実行のためにコンパイルされます。 These modules are compiled for node.js usage and executed to get the content. 加えて、そのモジュールは元のバンドル内で再コンパイルされ、空のモジュールに置き換えられます。 Additionally the modules are recompiled in the original bundle and replaced with an empty module.

抜き出されたモジュールのために、新しいアセットが作成されます。

イニシャル・チャンクのスタイルを、CSS出力ファイルへ分離

下記は複数のエントリー・ポイントがあるが、1つのエントリー・ポイントでも動作する例になります。

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // 基本的なエントリーポイント(entry)と出力(output)の設定
    entry: {
        posts: "./posts",
        post: "./post",
        about: "./about"
    },
    output: {
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [
            // CSSファイルの抜き出し
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            // Optionally extract less files
            // or any other compile-to-css language
            // 任意のlessファイルまたは別のCSSコンパイル言語の抜き出し
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
            // 同じ方法で別のローダーを使用することも可能です。
            // autoprefixer-loaderなど
        ]
    },
    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
    // 出力結果のファイル名を特定するためにプラグインを使用
    // (そして、コンパイラへ必要な挙動を追加)
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}

実行すると、これらのファイルが出力されるでしょう。

• posts.js、posts.css
• post.js、post.css
• about.js、about.css
• 1.js、2.js(埋め込みのスタイルを含む)

 Back to top