@snowpack/plugin-sass does not react to changes in imported files

[angryziber]

It seems, the plugin is quite new and only recently the recommendation was to use:

['@snowpack/plugin-run-script', {cmd: 'sass src/scss:public/css --no-source-map', watch: '$1 --watch'}]

(which can resolve imported files and react to their changes)

The new @snowpack/plugin-sass, however, has the function scanSassImports, but it doesn't go through imports recursively.

Also, in SASS/SCSS it is very common to import 'partial' files with _ prefix. Snowpack tries to process them separately and fails when these files use any variables defined in importing scope. The workaround is to add **/_*.scss to Snowpack exclude config.

[angryziber]

I tested with the latest version 1.1.1 of the plugin.
I have noticed that there was an effort to fix some import issues:
#1274

However, recursive resolving of imports was not done.

[FredKSchott]

Thanks for filing this! #1274 did add support for @import of partials, but we may have an issue handling @use. Are you using @use in your codebase?

[angryziber]

No, we don't use @use. It's just mostly bootstrap 4 with only a few customizations. The plugin sees only the original main.scss, and not even the direct partial imports.

[FredKSchott]

If you could create a example repo or codesandbox link (or, explicit steps to reproduce starting from a Create Snowpack App template) to reproduce, then I'd be happy to take a look!

[nagman]

Same issue here: the page doesn't reload when I edit a nested @import in my scss files.

[francislavoie]

Same problem - using @snowpack/plugin-sass v1.3.0, the rebuild doesn't trigger if a _*.scss file is updated, when using excluding **/_*.scss (so that they don't end up in the build output).

Maybe plugin-sass should have an option to exclude files from output but continue to track for changes?

[FredKSchott]

Have you tried removing _*.scss from your exclude config? @snowpack/plugin-sass is smart enough to not build your partials into your final build. That could solve it for you.

Full partial handling is definitely an expected feature of the plugin, so if there is something wrong here it is a bug that we can prioritize to fix

[francislavoie]

With this config, I do get the _*.scss files in the dist output (such as dist/admin-ui/styles/utilities/_vars.scss and all the rest) which are just copied from the source, seemingly unmodified:

module.exports = {
  exclude: [
    "**/node_modules/**/*",
    "**/__tests__/*",
    "**/*.@(spec|test|stories).@(js|mjs|ts|tsx)",
    "stories/**/*",
  ],
  plugins: [
    "@snowpack/plugin-react-refresh",
    "@snowpack/plugin-dotenv",
    "@snowpack/plugin-typescript",
    // ["@snowpack/plugin-run-script", {
    //   cmd: "sass --style=compressed --no-source-map src/admin-ui/styles/main.scss ../dist/admin-ui/styles/main.css",
    //   watch: "$1 --watch",
    // }],
    // ["@snowpack/plugin-run-script", {
    //   cmd: "sass --style=compressed --no-source-map src/common.scss ../dist/common.css",
    //   watch: "$1 --watch",
    // }],
    ["@snowpack/plugin-sass", {
      compilerOptions: {
        style: "compressed",
        sourceMap: false,
      }
    }]
  ],
  mount: {
    src: "/",
  },
  packageOptions: {
    polyfillNode: true,
  },
  buildOptions: {
    out: "../dist",
    clean: true,
    minify: false,
  },
}

[kirkone]

@FredKSchott I can confirm this behavior. When I exclude the .scss files they will not be in the output folder, but HMR does not work.
Without the exclude HMR works but then all the files are also in the build output.

Hier is an image of my setup:

[melissamcewen]

I'm having this issue with the Snowpack docs site 😬

[segovia94]

I can confirm having the same issue of partials _partial-name.scss showing up in the build directory. I am using snowpack 3.0.11 and @snowpack/plugin-sass 1.3.0

[equinusocio]

Same issue, but with plugin-postcss

[Markshall]

I had this same issue where sass wasn't reflecting any changes made in partial files.
I'm not using @snowpack/plugin-sass however, I've got a separate script to execute sass with my build command
"build": "snowpack build && sass src/sass/style.scss style.css --style=compressed",

I use 2 scripts when running my dev server:

{
    "start": "snowpack dev",
    "watch:styles": "sass src/sass/style.scss public/style.css --watch"
}

The issue I faced was similar to yours in that when I updated src/sass/_styleguide/_styleguide.scss which is being imported inside of src/sass/style.scss, the changes weren't being reflected on my dev server.

I sent to my public/index.html and changed the href of the CSS file from ./style.css to /style.css. Not sure why I ever had this changed in the first place, but it works for me now.

The reason my structure is set up like this is because I'm developing a WordPress theme, so I want my style.css at the root of my project directory as that's what WP requires to gather the meta information of the theme.

[mrkmiller]

I believe #2792 has fixed the main issue of files not changing, but it assumes that nothing is excluded. Also, this is for @snowpack/plugin-sass

[notoole-vccp]

I am still having this issue when Im importing sass from a different folder then my main styles e.g. in styles/main.scss - @import "../components/button/_button";
I am not excluding the components folder and have the versions below. Any help would be appreciated.
"@snowpack/plugin-sass": "^1.4.0" and "snowpack": "^3.6.2"

[Elijer]

I'm also having this issue. All sass files I import into my main sass file don't benefit from hot reloading. I have to restart the server and refresh the page in order to see changes in those files. Additionally, partial files must be imported directly when variables from them are used for the snowpack build command, but not for snowpack dev. It looks like it's been almost a year since this issue, is there a solution?

// package.json
  "devDependencies": {
    "snowpack": "^3.8.8"
  },
  "dependencies": {
    "@snowpack/plugin-sass": "^1.4.0",
    "@firebase/storage": "^0.9.7",
    "firebase": "^9.8.3",
    "sass": "^1.52.3"
  }

//snowpack.config.js
module.exports = {
    mount: {
        src: "/"
    },
    plugins: [['@snowpack/plugin-sass']],
  };

[francislavoie]

@Elijer Snowpack is basically dead. Switch to Vite.

[Elijer]

Ahhh thanks for the heads up. I feel like it was just yesterday everyone was flocking to it, but I guess when a github issue is a year old maybe I shoulda known.

…

On Sun, Jun 19, 2022, 11:01 AM Francis Lavoie ***@***.***> wrote: @Elijer <https://github.com/Elijer> Snowpack is basically dead. Switch to Vite. — Reply to this email directly, view it on GitHub <#1717 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AED265QRAMTMXYKUD6J7RNLVP476PANCNFSM4UN65UVA> . You are receiving this because you were mentioned.Message ID: ***@***.***>