LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@h_k92

Laravel/uiでレイアウトが崩れるエラーを対応

Last updated at Posted at 2020-04-20

はじめに

Laravel6.0以降からmake:authコマンドが使用できなくなり、laravel/uiをインストールする必要があります。

インストール方法についてはたくさんの方が記事を公表されておりスムーズに実装できると思ったのですが、いざlocalhostで接続すると以下の写真の通りレイアウトが崩れていることが判明しました。

・崩れた画面
スクリーンショット 2020-04-20 16.39.24.png

・正常画面
スクリーンショット 2020-04-20 18.16.14.png

今回はlaravel/uiをインストールしたけど、cssが崩れてしまっている人へ向けて解決策を書いていきます！
＊laravel/uiの詳しいインストール方法については割愛します。

laravel6.0以降ではpublic/cssおよびpublic/jsディレクトリが存在しない

laravel/uiをインストール後、npmを実行すれば認証画面が簡単に作成できると思っていたのですが、レイアウトが崩れちゃいました。

$ npm install

$ npm run dev

・エラーログ

 ERROR  Failed to compile with 2 errors                                                                                                   8:42:54 AM

 error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/node_modules/sass-loader/dist/index.js:36:28)
    at /var/www/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /var/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

 error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/node_modules/sass-loader/dist/index.js:36:28)

 @ ./resources/sass/app.scss 2:14-253

     Asset     Size   Chunks             Chunk Names
/js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/node_modules/sass-loader/dist/index.js:36:28)
    at /var/www/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /var/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.loader (/var/www/node_modules/sass-loader/dist/index.js:36:28)
 @ ./resources/sass/app.scss 2:14-253
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-04-20T08_42_54_908Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-04-20T08_42_54_976Z-debug.log

長いエラーですが、要するにsass/app.scssが反映されてない(コンパイル)できないとのこと。
また、laravel6.0以降、public/cssとpublic/jsがデフォルトで存在しないので、本来ならばnpmをインストールしたら勝手に作ってくれるのに、今回は失敗しちゃってるとのこと。

$ php artisan ui:auth --views

解決策

解決にかなり時間を要しましたが、以下を実行することで無事に解決しました。

$ php artisan ui:auth --views

$ npm uninstall --save-dev sass-loader
$ npm install --save-dev sass-loader@7.1.0

sass-loaderを一旦アンインストールし、その後にsass-loader@7.1バージョンをインストール

 DONE  Compiled successfully in 14325ms                                                                                                   8:35:27 AM

       Asset     Size   Chunks             Chunk Names
/css/app.css  177 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

無事に成功しました。
publicディレクトリにもcssとjsのディレクトリが反映されています。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?