Codesandbox-client: Codesandbox doesn't work with Bootstrap SCSS imports

[gragland]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] 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 (https://github.com/codesandbox/codesandbox-client/issues/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 | 40d75182a
| 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