Webpackスタイルローダーとcss-loader

238

2つの質問があります。

1） CSSローダーとスタイルローダーは、2つのWebpackローダーです。両者の違いがわかりませんでした。2つのローダーが同じ仕事をするときに、なぜ2つのローダーを使用する必要があるのですか？

2）上記のReadme.mdファイルで言及されている.useable.lessおよび.useable.cssは何ですか？

webpack webpack-style-loader

— Anvesh Checka
ソース

参照してください。これは角-CLI / WebPACKのクライアントにあなたのCSSスタイルを実現する方法である、詳細な説明は

— マックスKoretskyi

283

CSSローダーは、CSSファイルを取り、とCSSを返すimportsとurl(...)WebPACKの者を経由して解決しrequireた機能：

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

返されたCSS では実際には何もしません。

スタイルローダーはCSSを受け取り、実際にそれをページに挿入して、スタイルがページでアクティブになるようにします。

これらは異なる操作を実行しますが、Unixパイプのように、それらをチェーン化すると便利な場合があります。たとえば、Less CSSプリプロセッサを使用している場合は、

require("style!css!less!./file.less")

に

回しfile.less少ないローダーと平野CSSへ
CSSローダーを使用してCSSのすべてのimportsおよびを解決するurl(...)
スタイルローダーを使用してそれらのスタイルをページに挿入します

— ミシェル・ティリー
ソース

24

ページにスタイルを挿入することで何がわかりますか？私はCSSにExtractTextPluginを使用しているので、あなたが書いた内容に従って、スタイルローダーを使用するべきではありません。また、スタイルローダーを使用すると、抽出プラグインを使用するまで、スタイルがJSにバンドルされていると感じます。注：私はwebpackを使用しています。私はちょうど..私はすでに抽出プラグインによって作成された別のファイルに私のCSSを持っていますことを、上記告げたので、そのスタイル・ローダーを削除した後、物事はとして私のために変更されていません

— myDoggyWritesCode

6

@ user3241111彼はこれを意味していると思います：「<style>タグを挿入してCSSをDOMに追加します」（これはgithub.com/webpack/style-loaderの公式ドキュメントからコピーされます）

— exmaxx

1

つまり、webpackは処理されたすべてのCSSを取り除き、ドキュメントの先頭に配置するので、<link>タグおよびURLスタイル定義に対するHTTPリクエストを回避できますか？これがポイントだと思います。グラマーやグラマラスのようなものもこれを行います。この方法でロードする方が速いと確信しています。しかし、私は間違っているかもしれません。

— Tamb

ことでimports、私はあなたがを参照してくださいと仮定し@importディレクティブ。デフォルトでは、このディレクティブはインポートされたCSSルールをインポーターにマージせず、別のGETリクエストを作成します。それcss-loaderはマージされた出力を返すと言っていますか？

— adi518

1

そしてCSSを返します-JSを返します、これはangular-cli / webpackがCSSスタイルをクライアントに配信する方法です

— Max Koretskyi

54

css-loadercssファイルを文字列として読み込みます。あなたはそれを置き換えることができraw-loader、多くの状況で同じ効果を得ることができます。ファイルの内容を読み取るだけで、他のローダーとチェーンしない限り、基本的には役に立ちません。

style-loaderそれらのスタイルを受け取り、それらのスタイルを含む<style>ページの<head>要素にタグを作成します。

bundle.js使用後にJavaScriptを見るとstyle-loader、生成されたコードに次のようなコメントが表示されます。

//スタイルローダー：タグを追加することにより、CSSをDOMに追加します

例えば、

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

その例は、このチュートリアルからのものです。style-loader行を変更してパイプラインからを削除した場合

require("!style-loader!css-loader!./style.css");

に

require("css-loader!./style.css");

が<style>消えることがわかります。

— d512
ソース

5

そのとき、私は使うべきcss-loaderではなくてraw-loader？

— Royi Namir

4

css-loaderは@importとurl（）をimport / require（）のように解釈し、それらを解決します。ローローダーは指定されたファイルのみをロードします。

— andrew

13

2番目の質問「上記のReadme.mdファイルで言及されている.useable.lessおよび.useable.cssとは何ですか？」に答えるために、デフォルトではrequire'd、スタイルがの場合、スタイルローダーモジュールは自動的に<script>タグをDOMに挿入します。そのタグは、ブラウザウィンドウが閉じられるか再ロードされるまでDOMに残ります。スタイルローダーモジュールは、いわゆる「参照カウントAPI」も提供します。これにより、開発者はスタイルを追加し、後で不要になったときにスタイルを削除できます。APIは次のように機能します。

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

慣例により、このAPIを使用してロードされたスタイルシートには、上記の単なる「.css」ではなく、「。usable.css」の拡張子が付いています。

— クリサルネセン
ソース

この答えは、Webpackの構成に関するものではありません。

— Andrew Koster

@AndrewKoster意味がわかりません。これは、スタイルローダーモジュールの内部の仕組みとファイルの命名規則についての元の投稿者の2部構成の質問の2番目の部分に対する回答です。

— chrisarnesen

もちろん、あなたが言うように、質問には2つの部分があります。この回答（および受け入れられた回答）は、質問の最初の部分を完全に無視します。これは、より重要で一般的に当てはまる部分です。これらのローダーが何であるか、およびそれらをどのように構成するかという問題に対処する唯一の答えは、（何らかの理由で）誰も投票していないというBrian Ogdenの答えです。

— Andrew Koster

私はクレイジーな感嘆符付きのこの奇妙なrequire構文を使用していませんが、Webpackでこれらのローダーを構成する方法を知る必要があります。私のユースケースは、クレイジーなrequire構文を使用して行うすべてのものよりも一般的なもののようです。

— Andrew Koster

2

Webpackのドキュメントでは、style-loaderとcss-loaderを組み合わせることが推奨されています。

https://webpack.js.org/loaders/style-loader/

— ブライアンオグデン
ソース