- 1. 概要
- 2. ui
- 3. Node.js・npm
1. 概要
前ページで割愛した、下記の処理は、必要だったようです。
これが、なかなか、苦労します。
php artisan ui:auth
php artisan ui bootstrap
npm install
npm run dev
npm run build
あらかじめ、権限の必要なディレクトリの権限を変更しておきます。
2. ui
「ui」の設定を行う場合、まだ、ユーザ作成のソースは展開しておかないようにしておきます。
「Laravel」のディレクトリへ移動して。
php artisan ui:auth
下記のメッセージが表示されれば、問題ありません。
INFO Authentication scaffolding generated successfully.
php artisan ui bootstrap
下記のメッセージが表示されます。
INFO Bootstrap scaffolding installed successfully.
WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.
3. Node.js・npm
前項の最後のメッセージに従います。
まずは、十分なバージョンの「npm」を取得しますが、これは、「Laravel」のディレクトリでない方がよいです。
作業ユーザのホームディレクトリでやるべきでしょう。
詳細は、「JavaScript - Node.js・npm - インストール」あたりをご参照ください。
説明は、割愛します。
「AlmaLinux 9.5」「Laravel Framework 12.8.1」で、2025年4月14日にインストールしたときは。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
source ~/.bashrc
nvm install 22
次に、「Laravel」のディレクトリへ移動して、バージョン指定で「npm」をインストールします。
npm install -g npm@11.3.0
下記のメッセージが表示されました。
removed 14 packages, and changed 60 packages in 5s
25 packages are looking for funding
run `npm fund` for details
次に。
npm run dev
下記のメッセージが表示されました。
VITE v6.2.6 ready in 465 ms
? Local: http://localhost:5173/
? Network: use --host to expose
? press h + enter to show help
LARAVEL v12.8.1 plugin v1.2.0
? APP_URL: http://localhost
このまま、止まったままなので、不安になります。
h Enter で下記が表示されます。
Shortcuts
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit
ちゅうことで、q で抜けます。
次に。
npm run build
下記のメッセージが表示されました。
長いですが、あえて、全行掲載しておきます。
端末上の文字をコピペしたので、化けてしまった文字があります。
「?」や「x」で表示されているものは、文字化けしてしまったと思ってください。
また、実際の端末上は、カラフルです。
> build
> vite build
vite v6.2.6 building for production...
transforming (1) resources/js/app.jsDeprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
?
5 x @import 'variables';
x ^^^^^^^^^^^
?
resources/sass/app.scss 5:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
?
8 x @import 'bootstrap/scss/bootstrap';
x ^^^^^^^^^^^^^^^^^^^^^^^^^^
?
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
?
1 x @import "mixins/banner";
x ^^^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/bootstrap.scss 1:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
?
7 x @import "functions";
x ^^^^^^^^^^^
?
node_modules/bootstrap/scss/bootstrap.scss 7:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
?
8 x @import "variables";
x ^^^^^^^^^^^
?
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
transforming (2) resources/js/bootstrap.jsDeprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.
More info and automated migrator: https://sass-lang.com/d/import
?
207 x @return mix(white, $color, $weight);
x ^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 207:11 tint-color()
node_modules/bootstrap/scss/_variables.scss 79:12 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.
More info and automated migrator: https://sass-lang.com/d/import
?
212 x @return mix(black, $color, $weight);
x ^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 212:11 shade-color()
node_modules/bootstrap/scss/_variables.scss 84:12 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.
More info and automated migrator: https://sass-lang.com/d/import
?
342 x $light-bg-subtle: mix($gray-100, $white) !default;
x ^^^^^^^^^^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_variables.scss 342:27 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.
More info and automated migrator: https://sass-lang.com/d/import
?
11 x @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
x ^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 11:30 -assert-ascending()
node_modules/bootstrap/scss/_variables.scss 494:1 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.
More info and automated migrator: https://sass-lang.com/d/import
?
11 x @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
x ^^^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 11:51 -assert-ascending()
node_modules/bootstrap/scss/_variables.scss 494:1 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [color-functions]: red() is deprecated. Suggestion:
color.channel($color, "red", $space: rgb)
More info: https://sass-lang.com/d/color-functions
?
185 x "r": red($color),
x ^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 185:10 luminance()
node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio()
node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast()
node_modules/bootstrap/scss/_variables.scss 846:42 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [color-functions]: green() is deprecated. Suggestion:
color.channel($color, "green", $space: rgb)
More info: https://sass-lang.com/d/color-functions
?
186 x "g": green($color),
x ^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 186:10 luminance()
node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio()
node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast()
node_modules/bootstrap/scss/_variables.scss 846:42 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [color-functions]: blue() is deprecated. Suggestion:
color.channel($color, "blue", $space: rgb)
More info: https://sass-lang.com/d/color-functions
?
187 x "b": blue($color)
x ^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 187:10 luminance()
node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio()
node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast()
node_modules/bootstrap/scss/_variables.scss 846:42 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [color-functions]: red() is deprecated. Suggestion:
color.channel($color, "red", $space: rgb)
More info: https://sass-lang.com/d/color-functions
?
37 x @return red($value), green($value), blue($value);
x ^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 37:11 to-rgb()
node_modules/bootstrap/scss/_variables.scss 846:31 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
Deprecation Warning [color-functions]: green() is deprecated. Suggestion:
color.channel($color, "green", $space: rgb)
More info: https://sass-lang.com/d/color-functions
?
37 x @return red($value), green($value), blue($value);
x ^^^^^^^^^^^^^
?
node_modules/bootstrap/scss/_functions.scss 37:24 to-rgb()
node_modules/bootstrap/scss/_variables.scss 846:31 @import
node_modules/bootstrap/scss/bootstrap.scss 8:9 @import
resources/sass/app.scss 8:9 root stylesheet
transforming (100) node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.jsWarning: 234 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
? 111 modules transformed.
public/build/manifest.json 0.28 kB x gzip: 0.15 kB
public/build/assets/app-wO4EqYCH.css 227.30 kB x gzip: 30.87 kB
public/build/assets/app-De4R3s3M.js 116.96 kB x gzip: 38.48 kB
? built in 4.08s
途中、「Warning」のようなメッセージが表示されて、不安になりますが、ログイン画面が表示されるようになったので。
一応、正常にインストールできたようです。
|
