Codesandbox doesn't work with Bootstrap SCSS imports

[gragland]

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

CodeSandbox displays the following error when trying to hot load changes to a .scss file that imports Bootstrap: Cannot find module 'bootstrap/scss/mixins' from '/src'. The initial transpilation works fine, so it seems to just be an issue with how hot loading handles imports.

I believe the issue is that Bootstrap has both a file named _mixins.scss and a directory named mixins. The initial transpilation properly imports _mixins.scss with the syntax @import "mixins";. My best guess is that subsequent hot loading either attempts to import the mixins directory instead or it's having issues with the underscore prefix in _mixins.scss and it's not finding it.

This affects Bootstrap and presumably other CSS frameworks that have this file/folder structure.

To Reproduce

1. Visit this Codesandbox: https://codesandbox.io/s/codesandbox-scss-bug-37op3?file=/src/styles.scss
2. Wait for the initial transpilation then modify the primary color SCSS variable to any other color.
3. You'll see the error Cannot find module 'bootstrap/scss/mixins' from '/src'
4. Refresh and you'll notice your change takes affect (initial transpilation works, just an issue with hot loading)

Further Thoughts

I noticed there was previously a fix (#529) for SASS resolving underscores incorrectly. Maybe this fix isn't present in the hot loading logic?

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	40d7518
Browser	Chrome 84.0.4147.125
Operating System	macOS 10.15.6

[christianalfoni]

Hi @gragland and thanks for reporting a detailed issue!

We have looked at it and identified the issue, though we have a long list of prioritized issues, so just need "to get there". Sorry for the wait, but it will be fixed eventually!

[gragland]

Just wanted to check in and see if this is on the priority list. This has been causing issues for Divjoy customers who use our "Export to CodeSandbox" feature. If it looks like this is pretty far out on the roadmap (which I totally understand) then I'll need to disable the feature for now.

[SaraVieira]

Hey

I tried to take a look at this today and still do not understand why this happens, the reload logic is the same as the build logic for the first time :/

Will keep digging tommorrow

[virtualbis]

Seems I have similar issue when using Sass partials. I have posted a question here on stackoverflow but it seems to be a bug.

When I use @import "./_home"; it works fine but I originally had, as per Sass documentation, @import "./home"; which should work as well. Please confirm this is a bug or if I am doing something wrong here.

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[gragland]

This appears to still be an issue (commenting so not auto closed)

[gragland]

This problem appears to be back.

• Clone https://codesandbox.io/s/codesandbox-scss-bug-37op3?file=/src/styles.scss
• Initial compilation for Sass works fine
• Click refresh and you get an "Undefined variable" error
• Change a sass variable value and you get an "Undefined variable" error as well

Seems like hot loading isn't properly handling nested sass imports so variables are undefined.

[vdeantoni]

Can we please reopen this issue?

[symmetriq]

Just encountered this now. The following error shows up every time a hot reload occurs:

Undefined variable.
  ╷
6 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;

Manually reloading the preview makes it work…once…but it will fail again after the next hot reload.

Simple repro:
https://codesandbox.io/s/flamboyant-kowalevski-zlfn5i