UIkit 3(Less) + Laravel Mix 6

UIkit3

使用環境

Name	Version
Laravel Mix	6.0.28
Less	4.1.1
less-loader	10.0.1
UIkit	3.7.2

UIkit 3のテーマをコンパイルしてみようと思い、久しぶりにLessを使いました。

知らない内に、最新版は、4.1.1になっていました。

以前、試した時は、下記の通りです。

        "less": "2.7.3",
        "less-loader": "4.0.6",

やっぱり、less-loaderが4.0.6だと、Webpack 4に対応しているけど、Webpack 5は対応していないです。

github.com

UIkitのissuesを見ると、Less 4.1.1でも動くとのことで、試してみました。

webpack.mix.jsを、下記の通りに記述します。

let mix = require("laravel-mix");

mix.less("resources/assets/less/flatly-caution.less", "public/css", {
  lessOptions: {
    math: 'always'
  }
}).options({
  processCssUrls: false
});

無事に動きました。

追記(2021-08-23)

Cannot read property 'eval' of nullというメッセージが出たら、変数の定義をチェックすること。

変更前

@card-default-gradient:;

変更後

@card-default-gradient: '';