[BUG] Requested content ".css" but built .sass.

[nojaf]

Bug Report Quick Checklist

• I am on the latest version of Snowpack & all plugins.
• I use package manager yarn
• I run Snowpack on OS Linux
• I run Snowpack on Node.js v14.15.3

Describe the bug

My snowpack build is failing, there is a problem with react-refresh and sass plugin interfering.

To Reproduce

We can't fix bugs that we can't see for ourselves. Issues often need to be closed if this section is skipped.

1. npm init snowpack-app --template @snowpack/app-template-react
2. add sass plugin
3. import a sass file with only variables (this will not produce a css file)
4. snowpack build
5. See error!

[08:15:55] [snowpack] BUILD: /_dist_/styles/variables.css
[08:15:55] [@snowpack/plugin-sass] load() starting… [src/styles/variables.sass]
[08:15:55] [@snowpack/plugin-sass] ✔ load() success [src/styles/variables.sass]
[08:15:55] [@snowpack/plugin-react-refresh] transform() starting… [src/styles/variables.sass]
[08:15:55] [@snowpack/plugin-react-refresh] ✔ transform() success [src/styles/variables.sass]
[08:15:55] [snowpack] Build Result Error: There was a problem with a file build result.
[08:15:55] [snowpack] /workspace/fantomas-tools/src/client/src/styles/variables.sass - Requested content ".css" but built .sass.
[08:15:55] [snowpack] Error: /workspace/fantomas-tools/src/client/src/styles/variables.sass - Requested content ".css" but built .sass.
    at FileBuilder.verifyRequestFromBuild (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:112530:19)
    at FileBuilder.getResult (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:112742:42)
    at Object.loadUrl (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:131558:51)
    at async flushFileQueue (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:131966:28)
    at async build (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:131992:5)
    at async Object.command (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:132080:9)
    at async cli (/workspace/fantomas-tools/src/client/node_modules/snowpack/lib/index.js:132389:9)

Variables.sass looks like

$dark: #211426
$primary: #22A7F0
$secondary: #5fcde3
$danger: #E01D31
$warning: #D69D36
$success: #66D4AC
$white: #FFF

Expected behavior

A clear and concise description of what you expected to happen.

Anything else?

A workaround is to add some sass code that will produce css.

$dark: #211426
$primary: #22A7F0
$secondary: #5fcde3
$danger: #E01D31
$warning: #D69D36
$success: #66D4AC
$white: #FFF

// workaround for snowpack issue
blink
    font-weight: bolder

[drwpow]

According to @snowpack/plugin-sass’ README, you have to install the plugin and add it to your Snowpack config to enable it, like so:

- plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],
+ plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv', '@snowpack/plugin-sass'],

If I do this, I’m able to load .sass files just fine.

Let me know if I missed your issue, or if there’s something else that’s causing problems!

[drwpow]

Edit: ah, sorry—I missed the “only variables” part. You’re right that does result in an error.

I’m not sure, though, if this is an error on Snowpack’s fault? In Sass, what is an empty file supposed to produce? I believe the intended effect is to @use or @import within Sass to import these variables, right? I believe that is still working as expected for Snowpack, but let me know if there’s a scenario where you want an empty .css file in the build output.

[nojaf]

There is no scenario where I explicitly want that empty file.
I import a file that only contains variables.
https://github.com/fsprojects/fantomas-tools/blob/f51c04dc93cf095f9b363d42a2e9f4ab9a913cab/src/client/src/styles/fantomas.sass#L1

And that leads to problems with snowpack.

[drwpow]

Ah this is a bug in our @import scanning. I see. We’ll definitely need a fix for this.

I’ll consider this issue a duplicate of #2967 and we can track resolution there. In the meantime, a temporary workaround is to use @use if you’re able to, which is what Sass encourages people use now instead of @import (but I know not every setup can switch just yet; it’ll be a slow migration but Sass @import will be deprecated eventually)

[drwpow]

@nojaf I tried your repo, and on the latest version of Snowpack, I’m no longer seeing the issue if I remove the “blink” hack (I had to fix some broken imports to do so, like src/client/debug.js). Can you confirm?

[nojaf]

Yes, I can confirm. The problem seems to be resolved.