Snowpack: [plugin-sass] files starting with '_' prefix not getting picked up correctly

[FredKSchott]

Original discussion: #1266
/cc @heikkilamarko

Needs triage to find out why these files error, and aren’t being picked up by Snowpack on file change.

[heikkilamarko]

Partial sass files (those starting with underscore) are by convention imported without the underline character. Because of this, the importedByMap in the plugin implementation ends up containing incorrect filenames.

For example, if I have a partial named _myfile.scss, it will be imported as follows:

@import './styles/myfile';
// OR
@use './styles/myfile';

[heikkilamarko]

As mentioned in the original discussion, the second problem is that npm run build throws an error.
The reason seems to be that the plugin hands also the partial files to the sass compiler. If I change the code to ignore partials, the build succeeds.

[jhewt]

As mentioned in the original discussion, the second problem is that npm run build throws an error.
The reason seems to be that the plugin hands also the partial files to the sass compiler. If I change the code to ignore partials, the build succeeds.

I'm also facing this problem while running npm run build.
I've a single "entry" sass where all partials are imported with @import.
The error thrown is as if you're trying to compile the scss file individually without importing variables first.

src/sass/base.scss looks like this

// Core variables and mixins
@import "./variables";

// CSS Reset
@import "./normalize";

// Styles 
@import "./style";

// Grid flex
@import "./gridlex/gridlex";

// animate
@import "./animate";

// Responsive  
@import "./responsive-utilities";

And the sass folder structure:

Error thrown:
```bash
Joses-iMac:project josesachs$ npm run build

@ build /Users/josesachs/Animus/project
snowpack build

[snowpack] ! building source…
[snowpack] ✘ /Users/josesachs/Animus/project/src/sass/gridlex/_gridlex-classes.scss
Error: Command failed with exit code 65: sass --stdin --load-path /Users/josesachs/Animus/project/src/sass/gridlex
Error: Undefined variable.
╷
5 │ [#{$gl-attributeName}~="#{$gl-gridName}"],
│ ^^^^^^^^^^^^^^^^^
╵

• 5:4 root stylesheet
  at makeError (/Users/josesachs/Animus/project/node_modules/@snowpack/plugin-sass/node_modules/execa/lib/error.js:59:11)
  at handlePromise (/Users/josesachs/Animus/project/node_modules/@snowpack/plugin-sass/node_modules/execa/index.js:114:26)
  at processTicksAndRejections (internal/process/task_queues.js:89:5)```

[LachlanArthur]

Excluding the SCSS partials in the Snowpack config worked for me:

{
  ...
  exclude: [
    '_*.scss',
  ],
  ...
}

But it would be nice if the plugin could ignore them automatically.

[jhewt]

Excluding the SCSS partials in the Snowpack config worked for me:

{
  ...
  exclude: [
    '_*.scss',
  ],
  ...
}

But it would be nice if the plugin could ignore them automatically.

Indeed it should, also I totally forgot about excluding files with Snowpack's config. Thanks a bunch!

[heikkilamarko]

I guess, adding exclude works for the prod build, but how about the dev time. During development, the exclude causes snowpack not to detect changes to partial SASS files.

[jhewt]

For me it does detect changes in every included sass file in both dev and prod builds.
I just included the main sass file on top of the very first JS file, index.js in my case with Svelte:

import './sass/base.scss';

import App from "./App.svelte";

let app = new App({
    target: document.body,
});

export default app;

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
    import.meta.hot.accept();
    import.meta.hot.dispose(() => {
        app.$destroy();
    });
}

[DavidDeSloovere]

I'm stuck with excluding the _ files and not having changes picked up in those files under snowpack dev.
Importing the scss file in entry js (TS in my case) does not seem to help.
The _ files are built anyway.
Any suggestions?

[m9dfukc]

Hi,

I am also facing this issue. I am trying to get an old codebase to convert over to snowpack but this problem seems to be a roadblocker.

{
  ...
  exclude: [
    '_*.scss',
  ],
  ...
}

I can't find any documentation about this setting, it also doesn't change anything if added to the snowpack.config.js.

[FredKSchott]

This is an old issue, and I don't think that config is relevant anymore. @snowpack/plugin-sass should do everything that you need to support this, but if you're running into problems please create a new discussion with steps to debug/reproduce

[m9dfukc]

Old issue but still a problem ;)

Using "snowpack": "^3.0.0-rc.1" and "@snowpack/plugin-sass": "^1.1.2" I run into this exact error when using snowpack build. It looks like partials are getting picked up which leads to mentioned errors. According to the sass-lang documentation partials (starting with "_") should be ignored by the compiler ... this is definitely not the case here!

Applying this fix by @heikkilamarko did work though!

[FredKSchott]

Bah, you're right. I mention fixing this in that thread, but it looks like the fix never made it in (or may have gotten removed at some point). Will add back.

Thanks for the heads up!

[FredKSchott]

Fixed in 8f0d306b

[m9dfukc]

Cool thanks. Now let's get the hmr / reloading working for the partials ;) I started a new discussion here.