'@snowpack/plugin-sass' does not handle SASS files starting with '_' prefix correctly.

[heikkilamarko]

@snowpack/plugin-sass does not handle SASS files starting with '_' prefix correctly.

In DEV mode, there are no errors, but edits to files starting with '_' are not hot-reloaded.
PROD build (npm run build) fails with an error.

I can make the PROD build work by ignoring files having '_' prefix (see the comment):

// plugin.js

...
/** Load the Sass file and compile it to CSS. */
async load({filePath, isDev}) {
  const fileExt = path.extname(filePath);
  const contents = fs.readFileSync(filePath, 'utf8');
  // During development, we need to track changes to Sass dependencies.
  if (isDev) {
    const sassImports = scanSassImports(contents, filePath, fileExt);
    addImportsToMap(filePath, sassImports);
  }

  if (path.basename(filePath).startsWith('_')) return; // <-- ADDED THIS LINE TO FIX THE PROD BUILD!!!

  // If file is `.sass`, use YAML-style. Otherwise, use default.
  const args = ['--stdin', '--load-path', path.dirname(filePath)];
  if (fileExt === '.sass') {
    args.push('--indented');
  }
...

[FredKSchott]

Yes! That's the exact issue I was talking about in this comment: #1264 (reply in thread) (could have explained it better).

Just need to release a new version of Snowpack to resolve this issue. You can try our automated snowpack@next pre-release in the meantime, which matches what's on master right now and should have the missing feature that you need.

[FredKSchott]

Okay, fixed the update issue in #1274

The _*.scss files being included in build is an issue that can be tackled separately. Update: it was a simple fix, so I added it to #1274.

Thanks again for reporting these!

[FredKSchott]

Also, can you share the exact error message that you're seeing in build? I do see the sass files incorrectly showing up in the final build, but I don't see an error / the build still succeeds.

[heikkilamarko]

Here is the Github repo that I am migrating to use the new sass plugin. The repo does not contain the code that I am using to test the new plugin, but you should see the styling setup.

https://github.com/heikkilamarko/mobx-lit-html-app

I tried with your latest changes. DEV mode seems to work okay now, but running npm run build still gives the following error:

> snowpack build

[snowpack] ! building source…
[snowpack] ✘ /Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/src/styles/_app.scss
  Error: Command failed with exit code 65: sass --stdin --load-path /Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/src/styles
Error: Undefined variable.
  ╷
2 │   --app-card-shadow: #{$box-shadow};
  │                        ^^^^^^^^^^^
  ╵
  - 2:24  root stylesheet
    at makeError (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/execa/index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.load (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/@snowpack/plugin-sass/plugin.js:99:32)
    at async runPipelineLoadStep (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/snowpack/lib/build/build-pipeline.js:45:28)
    at async Object.buildFile (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/snowpack/lib/build/build-pipeline.js:210:24)
    at async FileBuilder.buildFile (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/snowpack/lib/commands/build.js:97:33)
    at async run (/Users/markoheikkila/Documents/github_repos/mobx-lit-html-app/node_modules/p-queue/dist/index.js:159:29)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mobx-lit-html-app@ build: `snowpack build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mobx-lit-html-app@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/markoheikkila/.npm/_logs/2020-10-11T07_19_10_485Z-debug.log

[FredKSchott]

I just tested this PR on your repo to confirm that it's working in both build and dev. Also, you can run snowpack build --clean in case the build directory has outdated build artifacts in it from before this fix went in.

Also in case it's not clear in the docs, the reason to use this plugin over the run-script is that you no longer need the temporary src/*.css files. Once this PR is merged and released, you can remove that line from your gitignore that ignore them, and then run git clean -fd to automatically remove those no-longer-needed css file builds from your src directory.

[heikkilamarko]

I updated my npm deps to the latest ones. I am still receiving the build error. I created a new branch use-sass-plugin to my repository where I have the new sass plugin in use.

https://github.com/heikkilamarko/mobx-lit-html-app/tree/use-sass-plugin

You should see the error if you run:

> npm i
> npm run build