less-loader

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

webpack用のLessローダーです。LessをCSSにコンパイルします。

はじめに

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

npm install less less-loader --save-dev

または

yarn add -D less less-loader

または

pnpm add -D less less-loader

次に、ローダーをwebpack設定に追加します。例

webpack.config.js

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

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

`lessOptions`

タイプ

type lessOptions = import('less').options | ((loaderContext: LoaderContext) => import('less').options})

デフォルト: { relativeUrls: true }

ローダーオプションのlessOptionsプロパティを介して、Less固有のオプションをless-loaderに渡すことができます。すべての利用可能なオプションについては、Lessドキュメントをdash-caseで参照してください。これらのオプションをプログラムでLessに渡しているので、ここでcamelCaseで渡す必要があります

`object`

オブジェクトを使用して、オプションをLessに渡します。

webpack.config.js

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

`function`

ローダーコンテキストに基づいて、Lessに渡されるオプションの設定を可能にします。

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: (loaderContext) => {
                // More information about available properties https://webpack.dokyumento.jp/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return {
                    paths: ["absolute/path/c", "absolute/path/d"],
                  };
                }

                return {
                  paths: ["absolute/path/a", "absolute/path/b"],
                };
              },
            },
          },
        ],
      },
    ],
  },
};

`additionalData`

タイプ

type additionalData =
  | string
  | ((content: string, loaderContext: LoaderContext) => string);

デフォルト: undefined

実際のエントリファイルにLessコードを先頭/末尾に追加します。この場合、less-loaderはソースをオーバーライドしませんが、エントリの内容を先頭に追加するだけです。

これは、Less変数のいくつかが環境に依存している場合に特に役立ちます

コードを注入しているため、これはエントリファイルのソースマッピングを壊します。多くの場合、複数のLessエントリファイルのように、これよりも簡単な解決策があります。

`string`

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: `@env: ${process.env.NODE_ENV};`,
            },
          },
        ],
      },
    ],
  },
};

`function`

`Sync`

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: (content, loaderContext) => {
                // More information about available properties https://webpack.dokyumento.jp/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};

`Async`

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: async (content, loaderContext) => {
                // More information about available properties https://webpack.dokyumento.jp/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};

`sourceMap`

タイプ

type sourceMap = boolean;

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

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

webpack.config.js

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

`webpackImporter`

タイプ

type webpackImporter = boolean;

デフォルト: true

デフォルトのwebpackインポーターを有効/無効にします。

これにより、場合によってはパフォーマンスが向上する可能性があります。エイリアスとnode_modulesからの@importは機能しないため、注意して使用してください。

webpack.config.js

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

`implementation`

タイプ

type implementation = object | string;

Less 3および4バージョンと互換性のあるless-loader

特別なimplementationオプションは、使用するLessの実装を決定します。ローカルにインストールされたpeerDependencyバージョンのlessを上書きします。

このオプションは、Less 3から4への移行を容易にするために、ダウンストリームツール作成者にとってのみ本当に役立ちます。

`object`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              implementation: require("less"),
            },
          },
        ],
      },
    ],
  },
};

`string`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              implementation: require.resolve("less"),
            },
          },
        ],
      },
    ],
  },
};

`lessLogAsWarnOrErr`

タイプ

type lessLogAsWarnOrErr = boolean;

デフォルト: false

Lessの警告とエラーは、単なるログではなく、webpackの警告とエラーになります。

warning.less

div {
  &:extend(.body1);
}

lessLogAsWarnOrErrがfalseに設定されている場合、それは単なるログであり、webpackは正常にコンパイルされます。しかし、このオプションをtrueに設定すると、webpackは警告を出してコンパイルに失敗します。

webpack.config.js

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

例

通常の使用法

less-loaderをcss-loaderとstyle-loaderとチェーンして、すべてのスタイルをすぐにDOMに適用します。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
    ],
  },
};

残念ながら、Lessはすべてのオプションを1対1でキャメルケースにマッピングするわけではありません。不明な場合は、実行可能ファイルを確認し、ダッシュケースのオプションを検索してください。

ソースマップ

CSSのソースマップを有効にするには、ローダーのオプションでsourceMapプロパティを渡す必要があります。これが渡されない場合、ローダーはdevtoolで設定されたwebpackソースマップの設定を尊重します。

webpack.config.js

module.exports = {
  devtool: "source-map", // any "source-map"-like devtool is possible
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

Chrome内で元のLessファイルを編集したい場合は、優れたブログ記事があります。このブログ記事はSassに関するものですが、Lessでも同様に機能します。

本番環境

通常、MiniCssExtractPluginを使用して、スタイルシートを本番環境の専用ファイルに抽出することをお勧めします。こうすることで、スタイルがJavaScriptに依存しなくなります。

インポート

まず、組み込みのless解決ロジックを使用しようとし、次にwebpack解決ロジックを使用します。

Webpackリゾルバー

webpackは、ファイルを解決するための高度なメカニズムを提供します。less-loaderは、lessが@importを解決できなかった場合、すべてのクエリをwebpackリゾルバーに渡すLessプラグインを適用します。したがって、node_modulesからLessモジュールをインポートできます。

@import "bootstrap/less/bootstrap";

~を使用することは非推奨であり、コードから削除できます（**推奨**）。しかし、歴史的な理由から、まだサポートしています。なぜ削除できるのでしょうか？ローダーはまず、相対として@importを解決しようとします。解決できない場合、ローダーはnode_modules内で@importを解決しようとします。

デフォルトのリゾルバーオプションは、resolve.byDependencyで変更できます。

webpack.config.js

module.exports = {
  devtool: "source-map", // any "source-map"-like devtool is possible
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  resolve: {
    byDependency: {
      // More options can be found here https://webpack.dokyumento.jp/configuration/resolve/
      less: {
        mainFiles: ["custom"],
      },
    },
  },
};

Lessリゾルバー

pathsオプションを指定した場合、モジュールは指定されたpathsで検索されます。これはlessのデフォルトの動作です。pathsは絶対パスの配列である必要があります。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname, "node_modules")],
              },
            },
          },
        ],
      },
    ],
  },
};

プラグイン

プラグインを使用するには、次のようにpluginsオプションを設定するだけです。

webpack.config.js

const CleanCSSPlugin = require('less-plugin-clean-css');

module.exports = {
  ...
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          plugins: [
            new CleanCSSPlugin({ advanced: true }),
          ],
        },
      },
    },
  ...
};

注記
カスタムプラグイン内のローダーコンテキストへのアクセスは、pluginManager.webpackLoaderContextプロパティを使用して行うことができます。

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add("pi", function () {
      // Loader context is available in `pluginManager.webpackLoaderContext`

      return Math.PI;
    });
  },
};

スタイルシートの抽出

webpackでCSSをバンドルすることには、ハッシュ化されたURLを持つ画像やフォントを参照したり、開発でホットモジュールリプレースメントを使用したりするなど、いくつかの利点があります。一方、本番環境では、JSの実行に依存してスタイルシートを適用するのは良い考えではありません。レンダリングが遅れたり、FOUCが表示されたりする可能性があります。したがって、最終的な本番ビルドでそれらを別々のファイルとして持つ方が依然として優れていることがよくあります。

バンドルからスタイルシートを抽出する方法は2つあります。

extract-loader（よりシンプルですが、css-loaderの出力に特化しています）
MiniCssExtractPlugin（より複雑ですが、すべてのユースケースで機能します）

CSSモジュールの注意点

LessとCSSモジュールには、url(...)ステートメントの相対ファイルパスに関する既知の問題があります。説明については、このissueを参照してください。

貢献

まだお読みでない場合は、貢献ガイドラインを読む時間を取ってください。

貢献

ライセンス

MIT

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

« 前へ

css-loader

postcss-loader