Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby Theme Shadowing Not Pulling In SCSS File

See original GitHub issue

Description

I have a mono-repo where I plan to have a few different layout themes as well as a few different color themes, the main idea being that I will be able to combine different layouts and color themes to create unique themes. However, I am running into a seemingly fundamental issue with how Gatsby themes work, that is, I cannot get shadowed SCSS (or CSS) files to be substituted out where they should be.

Steps to reproduce

I’ve created a repo to reproduce my issues, test-gatsby-themes. The instructions for reproduction are in the README there and should be straightforward and simple enough (if not let me know).

The basic gist of the problem (as defined in the repro repo) is that gatsby-layout-default should be importing gatsby-theme-light, which does appear to be happening as I have a log statement in gatsby-theme-light/gatsby-config.js that does indeed log successfully. However, the SCSS file at gatsby-theme-light/src/theme/styles.scss is NOT overwriting/shadowing the SCSS file at the same location at gatsby-layout-default/src/theme/styles.scss.

I’m stumped as to what I’m missing, according to everything I’ve read this should work.

Expected result

The SCSS file at gatsby-theme-light/src/theme/styles.scss should overwrite the file at gatsby-layout-default/src/theme/styles.scss as gatsby-layout-default imports gatsby-theme-light.

Actual result

The import appears to happen as the log statement in gatsby-theme-light/gatsby-config.js does log successfully, however, the SCSS file never overwrites the base file at the shadowed path.

Environment

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 80.0.1
    Safari: 13.1.2

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

LekoArtscommented, Oct 1, 2020

Glad to hear that you sorted out your problem! I didn’t account for the site in my answer but yeah, if you have the correct path the shadowing will work 😃

0reactions

DannyHinshawcommented, Oct 1, 2020

I will just note one more thing, my original design does indeed also work by just adding that extra shadow directory layer, so the problem doesn’t appear to have been the order of imports at all, just that missing directory level.

You can see it here on master branch.

Top Results From Across the Web

how to deal with imports when shadowing component

When shadowing a Gatsby theme how does one deal with import calls to components that does not need any changes. From my understanding...

Shadowing - Gatsby Theme Carbon

Guide for shadowing theme components and files. ... Open a quick issue in the gatsby-theme-carbon repo to make sure we're not working on ......

Gatsby theme shadowing for beginners: How I built a starter ...

1. Create shadowing directory ... Shadowed theme directory lives in your site's src/THEME-NAME . All files and subdirectories are relative to that ...

How To Use Themes in Gatsby - DigitalOcean

With Gatsby themes, any file in the theme's source code can be shadowed, from methods that affect Gatsby nodes and file generation to...

@nickymeuleman/gatsby-theme-blog - npm

Two plugins to add support for math equations via KaTeX are added. Sidenote: For KaTeX to work correctly, The plugins on their own...