Node.jsで追加したCSSのパッケージを利用する

LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。

GitHub - madebysource/lesshat: Smart LESS CSS mixins library.

Smart LESS CSS mixins library. Contribute to madebysource/lesshat development by creating an account on GitHub.

github.com

インストール

$ npm install -D lesshat;

設定ファイル

package.json

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development",
    "watch:dev": "webpack --mode=development --watch"
  },
  "author": "user",
  "license": "UNLICENSED",
  "devDependencies": {
    "css-loader": "^5.2.6",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "lesshat": "^4.1.0",
    "mini-css-extract-plugin": "^2.1.0",
    "style-loader": "^3.0.0",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2"
  }
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {   
                        loader: 'css-loader',
                        options: {
                            url: false
                        }
                    },
                    {
                        loader: 'less-loader'
                    },
                ]
            }
        ],
    },
    plugins: [   
        new MiniCssExtractPlugin({
            filename: './css/style.css'
        }),
    ]
};

LESS

./src/style.less

@import "lesshat";

/*略*/

ビルドの実行と結果

$ npm run build:dev

ERROR in ./src/less/style.less
@import "lesshat";
^
Less resolver error:
'lesshat' wasn't found. Tried - /Users/hoge/MyProject/src/less/lesshat.less,npm://lesshat,npm://lesshat.less,lesshat.less

修正する

node_modulesのlesshatディレクトリ直下にlesshat.leseが存在するので、style.lessを下記のように修正する。

@import "~lesshat/lesshat";

書き換えずに”node_modules”ディレクトリを参照させる設定は無いのでしょうか？（ありそう）