web-dev-qa-db-ja.com

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

2つ質問があります。

1） CSSローダー と スタイルローダー は2つのwebpackローダーです。両者の違いを理解することができませんでした。 2つのローダーが同じ仕事をするときに2つのローダーを使用しなければならないのはなぜですか？

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

webpackwebpack-style-loader
202
Anvesh Checka

CSSローダーはCSSファイルを受け取り、webpackのimports機能によって解決されたrequireとurl(...)でCSSを返します。

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

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

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

それらは異なる操作を実行しますが、Unixパイプのようにそれらを一緒にチェーンすることはしばしば役に立ちます。たとえば、 Less CSSプリプロセッサ を使用している場合は、次のように使用できます。

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

に

  1. Lessローダーを使ってfile.lessをプレーンなCSSに変換する
  2. CSSローダーを使用して、CSS内のすべてのimportsおよびurl(...)sを解決します。
  3. スタイルローダーを使ってそれらのスタイルをページに挿入する
251
Michelle Tilley

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

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

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

// style-loader：タグを追加してDOMにcssを追加します

例えば、

<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>がなくなったことがわかります。

45
d512

2番目の質問「上記のReadme.mdファイルに記載されている.useable.lessと.useable.cssとは何ですか？」に答えるために、スタイルがrequire'dの場合、デフォルトでスタイルローダーモジュールは自動的に<script>タグをDOMに挿入します。そのタグは、ブラウザウィンドウが閉じられるか再ロードされるまでDOMに残ります。 style-loaderモジュールは、開発者がスタイルを追加し、後で必要でなくなったときにそれらを削除することを可能にする、いわゆる「参照カウント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」という拡張子を持ちます。

13
chrisarnesen