입문

단계 6.0 이상 버전부터'생성'명령을 사용할 수 없습니다.'생성'/ui를 설치해야 합니다.
설치 방법에 대해 많은 사람들이 순조롭게 설치할 수 있다고 보도했지만 Localhost로 연결하면 다음과 같은 사진과 같이 레이아웃이 붕괴된다.
붕괴된 화면

정상적인 화면

이번에는 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 [email protected]

먼저sass-loader를 제거한 다음[email protected] 설치 버전

 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 디렉터리를 반영합니다.