この記事では、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 lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// oneof配列の中に追加
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .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'