0

Mi versión de Laravel es la 7.18.0

Mediante estas instrucciones en la consola:

composer require laravel/ui
php artisan ui vue --auth

Tengo disponibles los controladores, vistas, etc, para realizar la autenticación en Laravel

Pero cuando cargo la vista principal no se ve correctamente, así es cómo se ve:

introducir la descripción de la imagen aquí

Qué ocurre, por qué no se ve bien mi vista?

Gracias!

6
  • 1
    Te falta el estilo prueba poniendo este comando "php artisan ui bootstrap"
    – amj2020
    el 4 jul. 2020 a las 10:37
  • Buenas... Después de poner ese comando me dice "Bootstrap scaffolding installed successfully". Pero también me dice "Please run npm install && npm run dev to compile your fresh scaffolding". Pero cuando pongo npm install me dice "-bash: npm: no se encontró la orden"
    – Juaqui
    el 4 jul. 2020 a las 11:17
  • 1
    Aqui esta respondido justamente esto: es.stackoverflow.com/questions/369257/… , espero que te sirva de ayuda
    – amj2020
    el 4 jul. 2020 a las 11:21
  • 1
    ¿Verificaste si tú plantilla blade tiene los inlude correctos de la sección donde van los archivos de estilo css?, puedes checarlo en la carpeta resources/Views/layouts
    – Lek
    el 4 jul. 2020 a las 11:33
  • Buenas, en el archivo "app.blade.php" que está en el directorio resources/views/layouts veo esta línea: <link href="{{ asset('css/app.css') }}" rel="stylesheet"> y si hago una búsqueda en el directorio de la aplicación del archivo app.css no aparece por ningún lado, no se si será ese el problema...
    – Juaqui
    el 4 jul. 2020 a las 13:00

2 respuestas 2

0

Tienes que verificar que estés cargando correctamente las hojas de estilos. Has compilado los assets?

npm install
npm run watch (si quieres recompilar automáticamente al hacer los cambios en el frontend)

Si en cambio no quieres usar laravel mix ni compilar los assets, intenta esto para que comprendas el problema. Solo con incluir el cdn de bootstrap, verás corregidos los estilos

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!-- CSRF Token -->
   <meta name="csrf-token" content="{{ csrf_token() }}">

   <title>{{ config('app.name', 'Laravel') }}</title>

   <!-- Scripts -->
   <script src="{{ asset('js/app.js') }}" defer></script>

   <!-- Styles -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

Puedes crear tú mismo el fichero app.css en public/css para tus estilos personalizados.

7
  • 1
    Hola. Entiendo que hayas hecho una instalación fresca de Laravel. Luego de esto que has hecho, necesitas que se carguen los estilos, en este caso Bootstrap. Ya sea usando laravel mix o intentando linkearlo directame
    – Esternome
    el 4 jul. 2020 a las 11:28
  • 2
    Juanqui tienes que instalar npm, te dice npm not found porque no lo tienes instalado
    – Rddevelop
    el 4 jul. 2020 a las 12:07
  • 1
    Para un desarrollo más solido del proyecto, será mejor que si todo esto te suena raro, que cargues los estilos sin compilar ni usar webpack. Si es por estudiar, ve a la pagina de npm e instalalo globalmente para que lo tengas en futuros proyectos. Buena suerte artesano!
    – Esternome
    el 4 jul. 2020 a las 15:52
  • 1
    @Juaqui he editado un poco mi respuesta para er si te ayuda más. Saludos
    – Esternome
    el 4 jul. 2020 a las 16:13
  • 1
    Hola @Juaqui. La subida de MB se debe a la instalación de módulos a partir de tu npm install (están en node_modules). Revisa como funciona Laravel Mix y webpack si quieres trabajar de ese modo. Si hubieses instalado primero npm y compilado, no hubiese sido necesario el cdn de bootstrap porque al compilar lo instala y lo agrega por ti. Revisa bien cada cosa para que tomes el camino correcto y no termines duplicando tus dependencias. Saludos
    – Esternome
    el 5 jul. 2020 a las 9:59
0

Tuve el mismo error. Lo que pasa es que se tiene un npm desactualizado.

Lo que realicé es solo ingresar de manera separada el front que es el código:

  • composer require laravel-frontend-presets/tailwindcss --dev
  • php artisan ui tailwindcss --auth
  • php artisan ui react
  • npm install && npm run dev
  • npm remove laravel-mix
  • npm install laravel-mix --save-dev
  • npm install cross-env --save-dev
  • npm install && npm run dev

Después de esto te saldrá el cuadro de instalación completada de js y css introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.