Webpack4でLessを使うサンプル

Webpack に style-loader/css-loader/less-loader を積んで、Lessをコンパイルした結果のCSSを単一のJavaScriptファイルに埋め込む。
変更を監視しての自動コンパイルは、ここではやらない。

Node.js v10.16.3Webpack 4.41.0

サンプルプロジェクト作成

適当なカラのディレクトリを作って、その中で以下コマンド実行して、サンプル用のプロジェクトを作ります。

npm init -y

必要なパッケージをインストール

プロジェクトのディレクトリ直下で以下コマンド実行して、必要なパッケージをインストールします。

npm install --save-dev webpack webpack-cli
npm install --save-dev less css-loader style-loader less-loader

完了後の package.json は以下の通りになりました。(プロジェクト名はディレクトリの名前になってると思います)

package.json

{
  "name": "webpack-less-example",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

HTML, JavaScript, Lessを書く

以下の構成でファイルを用意します。

    /webpack-less-example
      ├ /src
      │  ├ /less
      │  │  └ style.less
      │  └ index.js
      ├ /public
      │  └ index.html
      ├ webpack.config.js (あとで作ります)
      └ package.json (さっき作りました)

それぞれの内容は以下の通りにします。

public/index.html

実際の画面となるHTMLです。./js/bundle.js はコンパイル時に生成されるので、今は存在しません。

念のため書いておくと、このサンプルではWebpackを使って、コンパイル後のCSSをJavaScriptのソースコード内に埋め込みます。なのでCSSを読み込む必要はありません。

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>サンプル</title>
</head>
<body>
	<div class="piyo">青い字だよーーーーーーーーーー！！！！！！！</div>
	<script type="text/javascript" src="./js/bundle.js"></script>
</body>
</html>

src/less/style.less

lessファイルです。ちゃんとコンパイルされないと動かないように、1行コメントとか入れておきます。

src/less/style.less

@charset "UTF-8";

body {
	div {
		&.piyo {
			// 正義の一行コメント
			color: #00f;
		}
	}
}

src/index.js

WebpackのエントリーポイントとなるJavaScriptです。

この中で、使用するlessファイルを import する必要があります。パスはソースコードとしてのlessファイルの場所を指定すればOKです。

src/index.js

import './less/style.less';

console.log('画面の字が青くなってるよ！');

Webpackでバンドルする

プロジェクト直下に、以下の内容で webpack.config.js を用意します。

これはlessをコンパイルしつ、バンドル後のファイルが public/js/bundle.js に作成されるようになってます。

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public/js'),  // 出力先は絶対パスで指定
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.less$/,  // 名称の末尾が.lessのファイルが対象
        exclude: /node_modules/,  // node_modules以下は見ない
        loader: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  }
};

そしたら、プロジェクト直下で以下コマンドを叩いて実行します。(npx が使える前提です。)

Webpack実行

npx webpack

完了すると、public/js/bundle.js が作成されます。これ一つにJavaScriptもCSSもまとまってます。

動作確認

public/index.html をブラウザで開くと、字が青くなってるはずです。開発者ツールのコンソールを開くと、src/index.js に書いてあったメッセージも表示されてるはずです。

以上です。さようなら。