React で less を導入する方法は？

この記事では、React で less を導入する方法について説明します。less は css に非常に似ているため、学びやすいです。また、less は css 言語に少し便利な拡張を加えただけであり、これが less が学びやすい理由の一つです。

1. less のインストール#

npm install less less-loader --save-dev

2. webpack ファイルの公開#

npx create-react-app を使用して構築した React プロジェクトでは、デフォルトで webpack 設定ファイルが隠されています。less を導入するには webpack 設定ファイルを変更する必要があるため、コマンドを実行して webpack 設定ファイルを公開する必要があります。

ここで注意が必要なのは、一度公開すると元に戻せないことです。

npm run eject

このステップが失敗した場合、次のコマンドを実行します：

git add .

git commit -m "init"

その後、再度 npm run eject を実行します。

注意：webpack ファイルの公開は create-react-app の初期段階でのみ行えます。一度プロジェクト構造が変更されると、再度公開操作を行うと失敗します。したがって、できるだけプロジェクトを作成する際に npm run eject 操作を行うようにしてください。

3. webpack.config.js の設定を変更#

適切な位置に以下を追加します：

// ここに追加
// const sassRegex = /\.(scss|sass)$/;
// const sassModuleRegex = /\.module\.(scss|sass)$/; 
// の後に

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// oneof配列の下に追加

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // CSSインポートをデッドコードと見なさない
  // 含まれるパッケージが副作用がないと主張しても。
  // webpackがこれに対して警告またはエラーを追加するまで削除してください。
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// CSSモジュールをサポートしますが、SASSを使用
// 拡張子は.module.scssまたは.module.sassを使用
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

4. less の使用方法#

新しい App.less ファイルを作成し、次に App.js にインポートします：

import './Map.less'

less 文法マニュアル