Snowpack - import scss into tsx - sass

Question

I am setting up a Snowpack project with the aim to move an existing Create-React-App application into it once things are configured the same.
I haven't found a way to import an .scss file into a .tsx file however.
The Snowpack docs only seem to discuss configuring scss as an externally built asset, suggesting putting your scss into a separate css folder { docs link }. However I would like to keep my scss files next to the tsx components they belong to, and import them into the component as I currently am.
The docs also reference a blog post discussing a setup with PostCSS, however that post suggests some issues with the approach, including that sourcemaps wouldn't work - which isn't going to fly.
I have created my project like this:
npx create-snowpack-app my-sweet-app --template #snowpack/app-template-react-typescript --use-yarn
I've then added a new scss file, src/test.scss
$best-colour: tomato;
body {
background-color: $best-colour;
}
and added an import in my src/App.tsx file:
import './test.scss';
When running yarn start I get the following error:
[error] [404] /_dist_/test.css.proxy.js
✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
✘ /home/me/repos/my-sweet-app/src/test.css
Can Snowpack be configured to import scss files into tsx files equivalent to how it works in Create React App? How?

Answer 1

While I have not a complete answer, I faced the same problem as you. What you basically want to achieve is, to add additional tools to Snowpack's build pipeline.
If you throw in Babel with Snowpack you can add arbitrary absurd babel plugins for all your transformation needs.
Using #researchgate/babel-plugin-transform-scss-import-to-string and adding it in my babel.config.js I was able to get my Sassy stuff transpiled into strings.
However, this is not a complete solution; because now Snowpack won't pick up changes in my Sass files... :( It seem's that a lot of those new anti bundlers are just that, they are against bundling and thus combining them with additional pre-processing stuff that used to be done by our good olde bundlers is cumbersome.