How do you connect the 'hamburgers' gem in Ruby on Rails? - ruby-on-rails

Question

I tried doing their Ruby on Rails instruction for installation but when I included #import 'hamburgers' it doesn't know where to search for the file. So what I tried to do was copy the files from the '_sass/hamburgers' directory from the 'hamburgers' gem into my project.
files inside the _sass/hamburgers directory pasted in my stylesheets folder.
Even after pasting the files in my project's stylesheet folder an error still shows up.
Error states
Error: Undefined variable: "$hamburger-padding-y".
on line 4:12 of app/assets/stylesheets/_base.scss
padding: $hamburger-padding-y $hamburger-padding-x;
If I understand correctly _base.scss is connected to hamburgers.scss so there shouldn't really be any issues. Hope to get some help!! :>
EDIT:
Here's my application.scss
/*
* This is a manifest file that'll be compiled into application.scss, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "hamburgers";
Here is also hamburgers.scss
#charset "UTF-8";
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 15px !default;
$hamburger-layer-width : 40px !default;
$hamburger-layer-height : 4px !default;
$hamburger-layer-spacing : 6px !default;
$hamburger-layer-color : #000 !default;
$hamburger-layer-border-radius : 4px !default;
$hamburger-hover-opacity : 0.7 !default;
$hamburger-active-layer-color : $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter : false !default;
$hamburger-hover-filter : opacity(50%) !default;
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
// Types (Remove or comment out what you don’t need)
// ==================================================
$hamburger-types: (
3dx,
3dx-r,
3dy,
3dy-r,
3dxy,
3dxy-r,
arrow,
arrow-r,
arrowalt,
arrowalt-r,
arrowturn,
arrowturn-r,
boring,
collapse,
collapse-r,
elastic,
elastic-r,
emphatic,
emphatic-r,
minus,
slider,
slider-r,
spin,
spin-r,
spring,
spring-r,
stand,
stand-r,
squeeze,
vortex,
vortex-r
) !default;
// Base Hamburger (We need this)
// ==================================================
#import "base";
// Hamburger types
// ==================================================
#import "types/3dx";
#import "types/3dx-r";
#import "types/3dy";
#import "types/3dy-r";
#import "types/3dxy";
#import "types/3dxy-r";
#import "types/arrow";
#import "types/arrow-r";
#import "types/arrowalt";
#import "types/arrowalt-r";
#import "types/arrowturn";
#import "types/arrowturn-r";
#import "types/boring";
#import "types/collapse";
#import "types/collapse-r";
#import "types/elastic";
#import "types/elastic-r";
#import "types/emphatic";
#import "types/emphatic-r";
#import "types/minus";
#import "types/slider";
#import "types/slider-r";
#import "types/spin";
#import "types/spin-r";
#import "types/spring";
#import "types/spring-r";
#import "types/stand";
#import "types/stand-r";
#import "types/squeeze";
#import "types/vortex";
#import "types/vortex-r";
// ==================================================
// Cooking up additional types:
//
// The Sass for each hamburger type should be nested
// inside an #if directive to check whether or not
// it exists in $hamburger-types so only the CSS for
// included types are generated.
//
// e.g. hamburgers/types/_new-type.scss
//
// #if index($hamburger-types, new-type) {
// .hamburger--new-type {
// ...
// }
// }

Answer 1

Per the comments, the OP requested this info though it does not answer the primary question.
Don't do any of the "ruby on rails" stuff from the official documentation.
Create app/assets/stylesheets/hamburgers.css and get the code from here (or just copy in the file). This is the dist/hamburgers.css file the documentation mentions.
In your application view (e.g., application.html.erb), in the <head> put in the stylesheet reference: <%= stylesheet_link_tag "hamburgers" %>
Put in some html markup (get from the documentation example here). Also, be sure to put the <script> code from the example (it's at the end).
When I did this, I got a fresh rails site to work exactly the same as how the hamburger author's example.html works.
As to why you get that hamburger-padding-y error, I don't think you are supposed to need to put the css AND scss files. The yarn install combined with the rails gem is probably supposed to take care of this, but I couldn't recreate the error because I couldn't get a rails server to work if I install the gem (hamburgers, which resolved to v1.1.3). I was using Ruby 2.6.2 / Rails 6.0.3.3
RESULT: