title: How to add Javascript dependencies and CSS files in Laravel correctly
body: <p>I am using Laravel 7 to build one of my application. I have the following Javascript dependencies.</p>
  
  <ol>
  <li>Bootstrap</li>
  <li>Data Tables</li>
  <li>jQuery</li>
  <li>Select 2</li>
  <li>Toastr</li>
  <li>D3</li>
  </ol>
  
  <p>Now I am using the new <code>laravel/ui</code> package and has scaffolded a Bootstrap based application. It uses Laravel Mix and has compiled <code>app.css</code> and <code>app.js</code> file. The <code>app.js</code> has the following code:</p>
  
  <p><code>require('./bootstrap');</code></p>
  
  <p>The bootstrap file has following code :</p>
  
  <pre><code>window._ = require('lodash');
  
  try {
      window.Popper = require('popper.js').default;
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap');
  } catch (e) {}
  
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  </code></pre>
  
  <p>I think in this file we need to add the other dependencies. In the documentation also it says to add the Javascript dependencies to here. I have a confusion on how to add <code>DataTables</code> and other above mentioned dependencies to the file. Which package names I need to use in the <code>require</code> ? </p>
  
  <p>Also, most of these packages has their own CSS files too. How can I add the CSS files for all the dependencies in file like the <code>bootstrap.js</code> ? Currently all the CSS files are imported in the app layout blade template. If someone can add a tutorial link , that also will be great.</p>