Your SCSS file assets/main.scss has an error: File to import not found or unreadable

Question

I am trying to get my jekyll+bootstrap website online on GitHub, to no avail. This is the error I end up receiving:

Your SCSS file assets/main.scss has an error on line 47: File to import not found or unreadable: assets/css/minima/base. Load paths: assets /hoosegow/.bundle/ruby/2.7.0/gems/jekyll-theme-primer-0.6.0/_sass.

this is the code where the error message is pointing to.

@import
  "assets/css/minima/base",
  "assets/css/bootstrap/bootstrap",
  "assets/css/minima/layout",
  "assets/css/minima/syntax-highlighting"
;

I have tried making changes to my sass_dir settings, no combination I try helps me render a page on Github pages.

this is the folder tree

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── LICENSE.txt
├── README_minima.md
├── _config.yml
├── _data
│   ├── home.yaml
│   ├── navbar.yml
│   └── test.yaml
├── _includes
│   ├── custom-head.html
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
│   ├── social.html
│   └── test.html
├── _layouts
│   ├── blog.html
│   ├── contact.html
│   ├── default.html
│   ├── events.html
│   ├── gallery.html
│   ├── home.html
│   ├── page.html
│   ├── post.html
│   └── test.html
├── _posts
│   └── 2021-10-21-why-a-science-club.markdown
├── _site
│   ├── 2021
│   │   └── 10
│   │       └── 21
│   │           └── why-a-science-club.html
│   ├── 404.html
│   ├── LICENSE.txt
│   ├── README_minima.md
│   ├── assets
│   │   ├── css
│   │   │   └── bootstrap
│   │   │       ├── bootstrap-grid.scss
│   │   │       ├── bootstrap-reboot.scss
│   │   │       ├── bootstrap-utilities.scss
│   │   │       └── bootstrap.scss
│   │   ├── img
│   │   │   ├── 1.jpg
│   │   │   ├── 1.png
│   │   │   ├── about
│   │   │   │   ├── about_cbs.jpeg
│   │   │   │   ├── about_clubs.jpeg
│   │   │   │   ├── baithak.png
│   │   │   │   ├── counselling.png
│   │   │   │   ├── interactive_session.jpg
│   │   │   │   ├── open_mic.jpg
│   │   │   │   ├── rendezvous.jpg
│   │   │   │   └── student_talk.jpg
│   │   │   ├── event_posters
│   │   │   │   └── harrygray.png
│   │   │   ├── favicon
│   │   │   │   ├── android-chrome-192x192.png
│   │   │   │   ├── android-chrome-512x512.png
│   │   │   │   ├── apple-touch-icon.png
│   │   │   │   ├── browserconfig.xml
│   │   │   │   ├── favicon-16x16.png
│   │   │   │   ├── favicon-32x32.png
│   │   │   │   ├── favicon.ico
│   │   │   │   ├── mstile-150x150.png
│   │   │   │   ├── safari-pinned-tab.svg
│   │   │   │   └── site.webmanifest
│   │   │   ├── gallery
│   │   │   │   ├── img_1.jpeg
│   │   │   │   ├── img_10.jpeg
│   │   │   │   ├── img_11.jpeg
│   │   │   │   ├── img_12.jpeg
│   │   │   │   ├── img_13.jpeg
│   │   │   │   ├── img_14.jpeg
│   │   │   │   ├── img_15.jpeg
│   │   │   │   ├── img_2.jpeg
│   │   │   │   ├── img_3.jpeg
│   │   │   │   ├── img_4.jpeg
│   │   │   │   ├── img_5.jpeg
│   │   │   │   ├── img_6.jpeg
│   │   │   │   ├── img_7.jpeg
│   │   │   │   ├── img_8.jpeg
│   │   │   │   └── img_9.jpeg
│   │   │   ├── icon.png
│   │   │   └── social
│   │   │       ├── fb.png
│   │   │       ├── tw.png
│   │   │       └── yt.png
│   │   ├── js
│   │   │   ├── bootstrap.bundle.js
│   │   │   ├── bootstrap.bundle.js.map
│   │   │   ├── bootstrap.bundle.min.js
│   │   │   ├── bootstrap.bundle.min.js.map
│   │   │   ├── bootstrap.esm.js
│   │   │   ├── bootstrap.esm.js.map
│   │   │   ├── bootstrap.esm.min.js
│   │   │   ├── bootstrap.esm.min.js.map
│   │   │   ├── bootstrap.js
│   │   │   ├── bootstrap.js.map
│   │   │   ├── bootstrap.min.js
│   │   │   └── bootstrap.min.js.map
│   │   ├── main.css
│   │   ├── main.css.map
│   │   ├── minima-social-icons.svg
│   │   └── scripts
│   │       ├── jplist.min.js
│   │       ├── jplist.min.js.map
│   │       ├── jplist.styles.css
│   │       └── jplist.styles.css.map
│   ├── blog
│   │   └── index.html
│   ├── contacts
│   │   └── index.html
│   ├── events
│   │   ├── 1.html
│   │   └── index.html
│   ├── feed.xml
│   ├── gallery
│   │   └── index.html
│   ├── index.html
│   └── test
│       └── index.html
├── assets
│   ├── css
│   │   ├── bootstrap
│   │   │   ├── _accordion.scss
│   │   │   ├── _alert.scss
│   │   │   ├── _badge.scss
│   │   │   ├── _breadcrumb.scss
│   │   │   ├── _button-group.scss
│   │   │   ├── _buttons.scss
│   │   │   ├── _card.scss
│   │   │   ├── _carousel.scss
│   │   │   ├── _close.scss
│   │   │   ├── _containers.scss
│   │   │   ├── _dropdown.scss
│   │   │   ├── _forms.scss
│   │   │   ├── _functions.scss
│   │   │   ├── _grid.scss
│   │   │   ├── _helpers.scss
│   │   │   ├── _images.scss
│   │   │   ├── _list-group.scss
│   │   │   ├── _mixins.scss
│   │   │   ├── _modal.scss
│   │   │   ├── _nav.scss
│   │   │   ├── _navbar.scss
│   │   │   ├── _offcanvas.scss
│   │   │   ├── _pagination.scss
│   │   │   ├── _placeholders.scss
│   │   │   ├── _popover.scss
│   │   │   ├── _progress.scss
│   │   │   ├── _reboot.scss
│   │   │   ├── _root.scss
│   │   │   ├── _spinners.scss
│   │   │   ├── _tables.scss
│   │   │   ├── _toasts.scss
│   │   │   ├── _tooltip.scss
│   │   │   ├── _transitions.scss
│   │   │   ├── _type.scss
│   │   │   ├── _utilities.scss
│   │   │   ├── _variables.scss
│   │   │   ├── bootstrap-grid.scss
│   │   │   ├── bootstrap-reboot.scss
│   │   │   ├── bootstrap-utilities.scss
│   │   │   ├── bootstrap.scss
│   │   │   ├── forms
│   │   │   │   ├── _floating-labels.scss
│   │   │   │   ├── _form-check.scss
│   │   │   │   ├── _form-control.scss
│   │   │   │   ├── _form-range.scss
│   │   │   │   ├── _form-select.scss
│   │   │   │   ├── _form-text.scss
│   │   │   │   ├── _input-group.scss
│   │   │   │   ├── _labels.scss
│   │   │   │   └── _validation.scss
│   │   │   ├── helpers
│   │   │   │   ├── _clearfix.scss
│   │   │   │   ├── _colored-links.scss
│   │   │   │   ├── _position.scss
│   │   │   │   ├── _ratio.scss
│   │   │   │   ├── _stacks.scss
│   │   │   │   ├── _stretched-link.scss
│   │   │   │   ├── _text-truncation.scss
│   │   │   │   ├── _visually-hidden.scss
│   │   │   │   └── _vr.scss
│   │   │   ├── mixins
│   │   │   │   ├── _alert.scss
│   │   │   │   ├── _backdrop.scss
│   │   │   │   ├── _border-radius.scss
│   │   │   │   ├── _box-shadow.scss
│   │   │   │   ├── _breakpoints.scss
│   │   │   │   ├── _buttons.scss
│   │   │   │   ├── _caret.scss
│   │   │   │   ├── _clearfix.scss
│   │   │   │   ├── _color-scheme.scss
│   │   │   │   ├── _container.scss
│   │   │   │   ├── _deprecate.scss
│   │   │   │   ├── _forms.scss
│   │   │   │   ├── _gradients.scss
│   │   │   │   ├── _grid.scss
│   │   │   │   ├── _image.scss
│   │   │   │   ├── _list-group.scss
│   │   │   │   ├── _lists.scss
│   │   │   │   ├── _pagination.scss
│   │   │   │   ├── _reset-text.scss
│   │   │   │   ├── _resize.scss
│   │   │   │   ├── _table-variants.scss
│   │   │   │   ├── _text-truncate.scss
│   │   │   │   ├── _transition.scss
│   │   │   │   ├── _utilities.scss
│   │   │   │   └── _visually-hidden.scss
│   │   │   ├── utilities
│   │   │   │   └── _api.scss
│   │   │   └── vendor
│   │   │       └── _rfs.scss
│   │   └── minima
│   │       ├── _base.scss
│   │       ├── _layout.scss
│   │       └── _syntax-highlighting.scss
│   ├── img
│   │   ├── 1.jpg
│   │   ├── 1.png
│   │   ├── about
│   │   │   ├── about_cbs.jpeg
│   │   │   ├── about_clubs.jpeg
│   │   │   ├── baithak.png
│   │   │   ├── counselling.png
│   │   │   ├── interactive_session.jpg
│   │   │   ├── open_mic.jpg
│   │   │   ├── rendezvous.jpg
│   │   │   └── student_talk.jpg
│   │   ├── event_posters
│   │   │   └── harrygray.png
│   │   ├── favicon
│   │   │   ├── android-chrome-192x192.png
│   │   │   ├── android-chrome-512x512.png
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── browserconfig.xml
│   │   │   ├── favicon-16x16.png
│   │   │   ├── favicon-32x32.png
│   │   │   ├── favicon.ico
│   │   │   ├── mstile-150x150.png
│   │   │   ├── safari-pinned-tab.svg
│   │   │   └── site.webmanifest
│   │   ├── gallery
│   │   │   ├── img_1.jpeg
│   │   │   ├── img_10.jpeg
│   │   │   ├── img_11.jpeg
│   │   │   ├── img_12.jpeg
│   │   │   ├── img_13.jpeg
│   │   │   ├── img_14.jpeg
│   │   │   ├── img_15.jpeg
│   │   │   ├── img_2.jpeg
│   │   │   ├── img_3.jpeg
│   │   │   ├── img_4.jpeg
│   │   │   ├── img_5.jpeg
│   │   │   ├── img_6.jpeg
│   │   │   ├── img_7.jpeg
│   │   │   ├── img_8.jpeg
│   │   │   └── img_9.jpeg
│   │   ├── icon.png
│   │   └── social
│   │       ├── fb.png
│   │       ├── tw.png
│   │       └── yt.png
│   ├── js
│   │   ├── bootstrap.bundle.js
│   │   ├── bootstrap.bundle.js.map
│   │   ├── bootstrap.bundle.min.js
│   │   ├── bootstrap.bundle.min.js.map
│   │   ├── bootstrap.esm.js
│   │   ├── bootstrap.esm.js.map
│   │   ├── bootstrap.esm.min.js
│   │   ├── bootstrap.esm.min.js.map
│   │   ├── bootstrap.js
│   │   ├── bootstrap.js.map
│   │   ├── bootstrap.min.js
│   │   └── bootstrap.min.js.map
│   ├── main.scss
│   ├── minima-social-icons.svg
│   └── scripts
│       ├── jplist.min.js
│       ├── jplist.min.js.map
│       ├── jplist.styles.css
│       └── jplist.styles.css.map
├── blog.markdown
├── contacts.markdown
├── events
│   └── 1.html
├── events.markdown
├── gallery.md
├── index.markdown
└── test.markdown

and here's the GitHub repository https://github.com/vardhamann/vardhamann.github.io

any help is appreciated.

Answer 1

I don't think you can import multiple files with only one import like you did. Try to import each of the files by itself like this:

@import "assets/css/minima/base";
@import "assets/css/bootstrap/bootstrap";
@import "assets/css/minima/layout";
@import "assets/css/minima/syntax-highlighting;

additionally you could import whole directory like this:

@import "assets/css/minima/*" 

but assuming your assets/css/minima/base.scss contains bootstrap default variables overrides and the other files contains class overrides this is not an option for you since the order of imports (bootstrap in between) is important.