Drupal 8 Bootstrap 4 Not Loading CSS Files

Drupal 8 Not Loading CSS Files

When working with Drupal 8 sites, after creating a new module and uploading to the Server, sometimes the CSS files stop getting loaded into the website. The response that comes back is 404 file not found.

Another reason why CSS files could not be loaded is when you try to debug Html.Twig file, you enable Twing debugging in Developement.Services.yml file and then you go to settings.local.php to make sure that Development.Services.yml file is properly referenced. 

After the change has been implemented, you try to empty the cache with Drush (Drush cc) or rebuild the cache (drush cr) using Drush terminal cd in the bin folder of the vender's folder. After all, has been done and BoooMmm, all your CSS stops loading and the website that has been showing properly now shows like something else.

Solution:

Go to settings.local.php and activate the following. 

/**
* Disable CSS and JS aggregation.
*/
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

/**
* Disable the render cache.
*
* Note: you should test with the render cache enabled, to ensure the correct
* cacheability metadata is present. However, in the early stages of
* development, you may want to disable it.
*
* This setting disables the render cache by using the Null cache back-end
* defined by the development.services.yml file above.
*
* Only use this setting once the site has been installed.
*/
$settings['cache']['bins']['render'] = 'cache.backend.null';

/**
* Disable caching for migrations.
*
* Uncomment the code below to only store migrations in memory and not in the
* database. This makes it easier to develop custom migrations.
*/
# $settings['cache']['bins']['discovery_migration'] = 'cache.backend.memory';

/**
* Disable Internal Page Cache.
*
* Note: you should test with Internal Page Cache enabled, to ensure the correct
* cacheability metadata is present. However, in the early stages of
* development, you may want to disable it.
*
* This setting disables the page cache by using the Null cache back-end
* defined by the development.services.yml file above.
*
* Only use this setting once the site has been installed.
*/
$settings['cache']['bins']['page'] = 'cache.backend.null';

/**
* Disable Dynamic Page Cache.
*
* Note: you should test with Dynamic Page Cache enabled, to ensure the correct
* cacheability metadata is present (and hence the expected behavior). However,
* in the early stages of development, you may want to disable it.
*/
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

/**
* Allow test modules and themes to be installed.
*
* Drupal ignores test modules and themes by default for performance reasons.
* During development it can be useful to install test extensions for debugging
* purposes.
*/
$settings['extension_discovery_scan_tests'] = TRUE;

/**
* Enable access to rebuild.php.
*
* This setting can be enabled to allow Drupal's php and database cached
* storage to be cleared via the rebuild.php page. Access to this page can also
* be gained by generating a query string from rebuild_token_calculator.sh and
* using these parameters in a request to rebuild.php.
*/
$settings['rebuild_access'] = TRUE;