Cannot import variables from sass file in Jekyll

Question

I have a variables.scss file that holds all of my sass variables in my root. I want to import it in my other scss files so that I can use these variables:

@import "/variables.scss";

However when I run the project, I get the following error:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss':
File to import not found or unreadable: /variables.scss. Load path: C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/minima-2.5.0/_sass on line 1

What am I doing wrong and how can I properly import my sass variables. here is my config_.yml file:

# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.

# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Project
email: [email protected]
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-paginate-v2

collections:
  posts:
    output: true
    permalink: /releases/:path

permalink: pretty

sass:
  sass_dir: _sass
  style: compressed
future: true 
published: true
# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.
# exclude:
#   - Gemfile
#   - Gemfile.lock
#   - node_modules
#   - vendor/bundle/
#   - vendor/cache/
#   - vendor/gems/
#   - vendor/ruby/

############################################################
# Site configuration for the Jekyll 3 Pagination Gem
# The values here represent the defaults if nothing is set
pagination:

  # Site-wide kill switch, disabled here it doesn't run at all 
  enabled: true

  # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
  debug: false

  # The default document collection to paginate if nothing is specified ('posts' is default)
  collection: 'posts'

  # How many objects per paginated page, used to be `paginate` (default: 0, means all)
  per_page: 5

  # The permalink structure for the paginated pages (this can be any level deep)
  permalink: '/page/:num/' # Pages are index.html inside this folder (default)
  #permalink: '/page/:num.html' # Pages are simple html files 
  #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.

  # Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
  title: ':title - page :num'

  # Limit how many pagenated pages to create (default: 0, means all)
  limit: 0

  # Optional, defines the field that the posts should be sorted on (omit to default to 'date')
  sort_field: 'date'

  # Optional, sorts the posts in reverse order (omit to default decending or sort_reverse: true)
  sort_reverse: true

  # Optional, the default category to use, omit or just leave this as 'posts' to get a backwards-compatible behavior (all posts)
  category: 'posts'

  # Optional, the default tag to use, omit to disable
  tag: ''

  # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts, 
  # in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
  locale: '' 

 # Optional,omit or set both before and after to zero to disable. 
 # Controls how the pagination trail for the paginated pages look like. 
  trail: 
    before: 2
    after: 2

  # Optional, the default file extension for generated pages (e.g html, json, xml).
  # Internally this is set to html by default
  extension: html

  # Optional, the default name of the index file for generated pages (e.g. 'index.html')
  # Without file extension
  indexpage: 'index'

############################################################

ashmaroli ashmaroli · Accepted Answer · 2019-09-07T14:16:16

First of all, use only relative basenames to import:

@import "variables";

// or if you've nested partials
@import "subdirectory/partial_name";

Secondly, if you're using sassc gem, ensure that you're using at least sassc-2.1.0 in your bundle. (Run bundle show to check). Or if you're using the deprecated sass gem, then continue using that until you can upgrade.

Lastly, ensure that your scss partial doesn't have unclosed parentheses.

UPDATE

Jekyll expects to find partials to import from in the configured sass_dir (which is _sass by default). So, you've to ensure that the path _sass/variables.scss exists either at your source directory or within the theme-gem you're using.

Cannot import variables from sass file in Jekyll

1 Answers

UPDATE