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

nojaf commented 3 years ago

Bug Report Quick Checklist

[x] I am on the latest version of Snowpack & all plugins.
[x] I use package manager yarn
[x] I run Snowpack on OS Linux
[x] 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.

npm init snowpack-app --template @snowpack/app-template-react
add sass plugin
import a sass file with only variables (this will not produce a css file)
snowpack build
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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 https://github.com/snowpackjs/snowpack/issues/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 commented 3 years ago

@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 commented 3 years ago

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

FredKSchott / snowpack