Как подключить bootstrap laravel

Question

Ivan Gagarinov · Accepted Answer

Для того чтобы подключить Bootstrap к проекту Laravel, вам нужно выполнить следующие шаги:

Шаг 1: Установите Bootstrap с помощью npm или yarn. Откройте терминал и выполните одну из следующих команд:

Для npm:

1

npm install bootstrap

Для yarn:

1

yarn add bootstrap

Шаг 2: Установите Laravel Mix, если вы еще не сделали этого. Laravel Mix - это инструмент сборки и оптимизации фронтенд-ресурсов вашего проекта Laravel. Установите Laravel Mix с помощью Composer:

1

composer require laravel/ui

И затем выполните команду для установки фронтенд-зависимостей:

1

php artisan ui bootstrap

Шаг 3: Скомпилируйте ресурсы фронтенда проекта с помощью Laravel Mix. Выполните команду npm run dev для компиляции ресурсов в режиме разработки или npm run production для компиляции ресурсов в режиме продакшен.

Шаг 4: В вашем базовом blade-шаблоне, например, resources/views/layouts/app.blade.php, добавьте ссылку на файл стилей Bootstrap внутри тега . Используйте asset функцию Laravel для обращения к статическим файлам вашего проекта. Например:

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>
  <html>
  <head>
      <!-- Другие теги head -->
      
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <body>
      <!-- Ваш контент -->
  </body>
</html>

Иван · Answer

Работаю на хостинге.
Команда npm run dev для компиляции ресурсов - выдает ошибку

ivkoles23y@vh315 ~/ivan23 $ npm run dev

> dev 
> vite

2:46:33 PM [vite] (client) Re-optimizing dependencies because vite config has changed

  VITE v6.3.5  ready in 274 ms      

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose  
  ➜  press h + enter to show help   

  LARAVEL v12.19.3  plugin v1.3.0

  ➜  APP_URL: http://localhost
node:internal/errors:490        
    ErrorCaptureStackTrace(err);
    ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/i/ivkoles23y/ivan23/vendor/laravel/framework/src/Illuminate/Support/Facades/Date.php'
    at FSWatcher.<computed> (node:internal/fs/watchers:247:19)
    at Object.watch (node:fs:2315:34)
    at createFsWatchInstance (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22195:17)        
    at setFsWatchListener (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22242:15)
    at NodeFsHandler._watchWithNodeFs (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22397:14)
    at NodeFsHandler._handleFile (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22461:23)    
    at NodeFsHandler._addToNodeFs (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22703:21)   
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:23896:10)       
    at NodeFsHandler._addToNodeFs (file:///home/i/ivkoles23y/ivan23/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:22711:18) { 
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/i/ivkoles23y/ivan23/vendor/laravel/framework/src/Illuminate/Support/Facades/Date.php',
  filename: '/home/i/ivkoles23y/ivan23/vendor/laravel/framework/src/Illuminate/Support/Facades/Date.php'
}

Node.js v18.14.2

Как подключить bootstrap laravel

Ответы

Каталог