Parcel: Parcel not tracking for changes on scss files

[natqe]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json:

{
  "name": "any",
  "version": "1.0.0",
  "description": "any",
  "main": "./app/index.htm",
  "scripts": {
    "start": "parcel app/index.htm  -p 506",
    "https": "parcel app/index.htm --no-cache --https -p 506",
    "watch": "parcel watch app/index.htm --public-url ./",
    "build": "parcel build app/index.htm --no-cache --public-url ./",
    "test": "parcel watch app/index.scss --no-cache"
  },
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/any/any.git"
  },
  "author": "natan farkash",
  "license": "ISC",
  "homepage": "https://bitbucket.org/any/any#readme",
  "devDependencies": {
    "autoprefixer": "^8.5.0",
    "node-sass": "^4.9.0",
    "parcel-bundler": "git+https://github.com/parcel-bundler/parcel.git",
    "postcss-modules": "^1.1.0",
    "typescript": "^2.8.3"
  },
  "dependencies": {
    "angular": "^1.7.0",
    "angular-animate": "^1.7.0",
    "angular-aria": "^1.7.0",
    "angular-material": "^1.1.9",
    "angular-messages": "^1.7.0",
    "angular-route": "^1.7.0",
    "element-closest": "^2.0.2",
    "lodash": "^4.17.10"
  }
}

🤔 Expected Behavior

Tracking my files for changes and updating the bundle.css

😯 Current Behavior

I'm need to change something in index.scss for parcel refresh the bundle with the new code from the partials, and without that is not recognize my changes in _partial.scss

💁 Possible Solution

🔦 Context

💻 Code Sample

//index.scss
@import 'partials/selector';

project example:
https://github.com/natqe/parcel_bug_watcher_sass_example

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.0.9
| Node | 10.3.0
| npm | 6.0.1
| Windows 10 |

[DeMoorJasper]

Could you please provide with a test repo?
There is an open issue already related to this issue. But I'd like to have a test repo to see why this happens.

[natqe]

@DeMoorJasper
I sended to your mail an example, i hope you got it.

[DeMoorJasper]

Got it. I’ll try to debug it soonish

_{Sent with GitHawk}

[natqe]

@DeMoorJasper
I added simplest repo for better example
https://github.com/natqe/parcel_bug_watcher_sass_example

[DeMoorJasper]

I'm not able to reproduce this at all.

This might be windows related?

I'm also using a local version of parcel (latest master branch) So this might be fixed in 1.9, but I highly doubt it as anything related to watching sass files hasn't changed.

[natqe]

@DeMoorJasper
I'm also use the latest master branch of parcel (because 1.8.1 is freezing). and maybe its related to my machine, but i don't think so because the other versions of parcel worked fine (1.6.2 - 1.7.2).

[natqe]

I am still running into same problem with 1.9.0!

[natqe]

I am working with nodemon now for scss files

[lysla]

I have the same issue here (running Win 10 x64), I am using latest version 1.9.0 - not doing it with nodemon tho.

My app,js

import '/scss/app.scss';
const jquery = require('jquery');
window.$ = window.jQuery = jquery;
require('bootstrap');

My app.scss

@import "variables"; 
@import "./node_modules/bootstrap/scss/bootstrap";
@import "custom";
@import "./node_modules/slick-carousel/slick/slick.scss";
@import "./node_modules/slick-carousel/slick/slick-theme.scss";

I tried also using ~/ insteand of specific ./node_modules but nothing changed.
If I edit directly app.scss the build updates (❗️ but without noticing the changes done in partials, it just recompile it as if nothing else has been modified aside the app.scss itself) my bad there it actually notices the changes of the partial IF i edit the app.scss - if I edit partials like _custom.scss or _variables.scss the build doesn't refresh. The task I run is

parcel watch src/app.js -d assets --no-hmr

ℹ️ when I use node-sass directly instead, everything works fine, like so

node-sass --watch src/scss/ --output assets/ --output-style compressed --recursive

Thank you for your efforts!

[paskausks]

I'm experiencing the same issue on Windows 8 with node v8.11.3 and parcel-bundler 1.9.0.

Parcel doesn't detect file changes 2 levels deep for me for SCSS files.

_main.scss_, imported in _entrypoint.js_, changes are detected:

@import 'text/typography';

But changes in __typography.scss_ aren't. Will try this on a linux machine once I get the chance.
I'm not using the CLI, but the API instead, since i need to move the generated index file after building, but I doubt that's what's affecting it. :thinking:

[DeMoorJasper]

@pundurs does it work when you rename _typography.scss to typography.scss might be an incorrect path due to this implicit importing.

[natqe]

@DeMoorJasper I check it already and its not related

[paskausks]

@DeMoorJasper @natqe Yeah, renamed it to typography.scss, still, the changes aren't detected.

I'm in the process on setting my project up on my linux laptop to try and reproduce, and will update.

[paskausks]

Yeah, it works for me on Fedora Linux 28 (node 8.11.2, parcel-bundler 1.9.0). File changes in _typography.scss are detected and the bundle is regenerated.

[DeMoorJasper]

In that case it might be a chokidar bug with windows

[lysla]

I also tried on both files sides removing _ and/or adding .scss in the file which contains the imports, and/or renaming the imported files. No improvings 😢 I see apparently it's a windows-only issue, but node-sass works okay there. Please do consider the many of us who are stuck on windows enviroment 🙏

[DeMoorJasper]

node-sass isn't responsible for watching that's what chokidar does.
Perhaps try reporting it in the chokidar repository?

[lysla]

@DeMoorJasper Please do correct me if I'm wrong, but as far as I understood also webpack uses chokidar to watch files. I used (and tried now again just to be sure) webpack and I don't have this issue. I wouldn't have problems reporting this in chokidar repository, but I really wouldn't know what to say without having to refer to parcel specific case. If there is no other suggestion tho, I'll proceed and open an issue there linked to this one. Thank you 🙏

[DeMoorJasper]

Haven't been able to reproduce, I don't know whats causing the issue as I can't reproduce or test this.

[natqe]

@DeMoorJasper What are you need to reproduce the issue?

[DeMoorJasper]

Windows probably, but I'm using os x

[natqe]

@DeMoorJasper So, parcel is don't have compatibility with windows

[DeMoorJasper]

It is compatible with windows (therefore the appveyor tests)
But I use os x so I can't test it out nor reproduce.

Sorry if my reply was confusing.

If anyone with windows would like to debug or narrow this issue down to a specific issue that would be amazing :)

[lysla]

Could it be related to the fact that after installing parcel we get notified that the fsevents optional dependency was skipped - since it's not compatible with windows? Same happens with webpack tho... 😕

[paskausks]

@lysla i haven't tested it on mac, but it's fine on linux (which also isn't compatible with fsevents). in my own investigation, the bug appears only on Windows.

[lysla]

Aw, I really hope I actually managed to find the sweet bug. Turns out, 'beloved' windows uses forward slashes / in the dependecies paths, and the SASS dependecies collector really doesn't like it.
In
...\node_modules\parcel-bundler\src\assets\SASSAsset.js:68,
just inside the for iteration I added:

dep = dep.replace(/\//g, '\\');

And at least for me that solved it all. 🎉

[DeMoorJasper]

@lysla awesome could you write a pr with a check to only do this rewrite in windows?

_{Sent with GitHawk}

[lysla]

@DeMoorJasper I really do hope I did it right. Thanks for helping out. 🙏

[natqe]

@DeMoorJasper I can confirm that is work! thank you @lysla

[paskausks]

Can confirm that this patch works for me as well. Sweet find @lysla!

[Ciantic]

I can't seem to get this working with the patch. I also use css modules with SCSS, maybe they are broken too.

When I do a change to scss file, the browser updates, but it looses all styling.

[Ciantic]

Here is my simple test repo (with TS and SCSS and CSS modules):

https://github.com/Ciantic/test-parcel

1. Start the server npm run develop
2. Notice the background color of the element in browser.
3. Change lib.scss $color to different color.
4. Browser looses all styling

[lysla]

@Ciantic I don't think this problem is related to watching/tracking scss partial files.
I just tried your repo, and parcel actually re-compiles correctly the dist files. The issue is within the HRM, since the browser doesn't automatically reload the correct styles; or better it doesn't reload the correct classes' name. Refreshing the page manually fixes it tho... that means the file has been correctly updated. Maybe the HRM is reloading the server too soon?

[natqe]

@DeMoorJasper so the issue is fix? in how version of parcel?

[Ciantic]

@lysla so one should create a new issue for that?

[lysla]

@natqe the issue is fixed for me using latest version after the merge [email protected]
@Ciantic My personal opinion is that you try and do so but I didn't fully debug your test repository, in your position I'd try to remove some of the "between steps" and see if that works properly, just to understand where the problem lays. Maybe try to import the partial scss within the main scss file instead of using TypeScript and see how it goes?

[chocolateboy]

I have this issue on Linux (Arch) with Parcel v1.9 and v1.10. I'm intrigued by the comments saying that the issue a) can't be reproduced b) only affects Windows or c) has been fixed, as there's no mention of HMR anywhere in the Sass asset file. So, while I'm glad it's working for some people, as far as I can tell it's only working by accident i.e. it shouldn't work (since it's not implemented), and if it does work it's a bug :-)

Perhaps there are configurations where either HMR or a full page reload is happening as a side effect of changes to Sass files? If so, I'd love to see someone reproduce a test case/repo that always works rather than the onus being on creating one that doesn't work.

As mentioned above, Parcel correctly detects the changes and rebuilds. It's just failing to trigger HMR. If I add the following to the SASSAsset constructor, the problem goes away:

this.hmrPageReload = true

But obviously that's a sticking plaster as we want HMR rather than a full reload. The HMR code in CSSAsset.js looks easy enough to reproduce or reuse (which it used to do before v1.7.0). Is there a reason why it's not included in SASSAsset.js?

[chocolateboy]

Related: https://github.com/parcel-bundler/parcel/issues/1931

[devongovett]

Sounds like this was fixed

[JakubKoralewski]

Still happens inside .svelte components when imported in <style lang="scss" tags:

<style lang="scss" global>
    @import './style.scss';
</style>

Doesn't detect changes to style.scss.

A quick fix is to add the import in the style tag as shown above as well as import the scss in the index.html file; although, this will require removing it for production 🗑