application.js

// app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

// vendor
require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('trix');
require('@rails/actiontext');

// stylesheets
require('../stylesheets/application');

application.scss

// app/javascript/stylesheet/application.scss

// Initial
@import 'base/variables'; // this files has only variables in it

// You have to import the functions and variables from the bootstrap package first
@import '~bootstrap/scss/functions'; // ~bootstrap is a shortcut to node_modules/bootstrap
@import '~bootstrap/scss/variables';

// Base
@import 'base/layout'; 
@import 'base/typography';

// Vendor
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index';

// Overrides
// this is where I override global styles for bootstrap components
@import 'overrides/buttons';
@import 'overrides/cards';
@import 'overrides/forms';
@import 'overrides/navbar';

// Modules
// this is where I import components that aren't part of bootstrap
@import 'modules/avatars';
@import 'modules/comments';
@import 'modules/dropdowns';
@import 'modules/flash_message';
@import 'modules/forms';
@import 'modules/header';
@import 'modules/icons';
@import 'modules/list_groups';
@import 'modules/navs';
@import 'modules/ratings';
@import 'modules/reviews';
@import 'modules/trix';
@import 'modules/warning';

// Pages
// this is where I import "page" related scss basically one stylesheet per controller if needed
@import 'pages';
@import 'vendors';