I am not able to run SASS into my create-react-app

[gfdesign]

Hi there
I am following the thread started here.
I did what you suggested to downgrade node-sass-chokidar to 0.0.2 but I got same results

About your question:

do you have some sort of mounted file system or running a VM or windows/linux hybrid? Are you running cygwin or have symlinks or anything like that?

I would say not, I mean I am not running a VM or windows/linux hybrid or cygwin. As you've asked, I am attaching the very basic react project done with create-react-app where I first run "npm run watch-css". At first, scss file is generated correctly but when I make some change and save it, I get this error:

C:\React\sass>npm run watch-css

> sass@0.1.0 watch-css C:\React\sass
> npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive


> sass@0.1.0 build-css C:\React\sass
> node-sass-chokidar src/ -o src/

Rendering Complete, saving .css file...
Wrote CSS to C:\React\sass\src\App.css
Wrote 1 CSS files to C:\React\sass\src\
=> changed: C:\React\sass\src\App.scss
{
  "status": 3,
  "message": "File to read not found or unreadable: C:/React/sass/src/App.scss",
  "formatted": "Internal Error: File to read not found or unreadable: C:/React/sass/src/App.scss\n"
}

I'll see if I can reproduce this issue in other computer with Windows 10.
Looking forward to your comments.
Best regards

react-with-sass.zip

[gfdesign]

Fortunately, I've found my issue. This was due to permissions on my "React" folder. What I did was give "full control" from folder properties. Sorry if I made you wasted time researching about this issue. At least, I hope this thread helps someone else that face to same problem.
Thanks for your time.
Regards

[gfdesign]

Sorry, I am still having same errors. I don't know why it happens since sometimes I don't have any one but when I make changes on my .scss file and save it, majority of times I get error.
If I am able to find the solution, I'll go back.
Thanks

[michaelwayman]

lol @gfdesign, rollercoaster of emotions following that.
Thank you so much for opening the issue and following up, especially with the sample project.
I do not have a windows machine myself, I will try getting ahold of one at work tomorrow and duplicating the issue with the project you included.
I'll play around with permissions for a bit, should be a good starting point.

[gfdesign]

Hi @michaelwayman
Yes, you're right. Especially when you're not developer like me.

Fortunately, I guess I know what is the cause, at least, one of them. This issue comes up when I save the .scss file using Sublime Text 3 or Visual Studio Code. Then, reading some tickets on Github and Stackoverflow, I found that one of cause could be the "atomic save" feature have some editors. So, I enabled it on ST3 and this issue did not come up anymore. It's worth mentioning, when I save the .scss file using NotePad, this error does not come up either. In VSCode, I still seeing this issue but in the first save, then in next saving, the script compiles as expected until until you introduce a new change on the file and the issue repeats again.

These tickets could give you a better vision about the issue I was dealing:
sass/node-sass#1894
microsoft/vscode#20491
sass/node-sass#2022

Since ST3 is the editor I use often, I would say this issue is solved, at least for me :)

Thanks for your assistance.
Best regards

[slamjs]

Hello @michaelwayman, i have the same issue but what if i doesn't want to switch for ST3 as @gfdesign did? I use VS code.

[tkshnwesper]

Hey, maybe this option in chokidar might help

atomic (default: true if useFsEvents and usePolling are false). Automatically filters out artifacts that occur when using editors that use "atomic writes" instead of writing directly to the source file. If a file is re-added within 100 ms of being deleted, Chokidar emits a change event rather than unlink then add. If the default of 100 ms does not work well for you, you can override it by setting atomic to a custom value, in milliseconds.

[prameshbajra]

@llKreator I too use vs code and have the same error. Did you fix it? If yes, how?

[slamjs]

@Suzal3579 no i don't. But i found that i can just install extension which will compile sass for me, just search for sass or scss extension and you will find plenty of them

[sebhewelt]

I'm facing this issue. I'd like to use node-sass-chokidar with VSCode though. It works on second save, which is kind of annoying. Any ideas? :/

[prameshbajra]

In windows - vs code, atomic save is the issue I guess. I tried disabling the atomic save feature but it was warned not to do so as it might lead to several issues/errors. Also, I somewhere read that it cannot be fixed. Hence, I removed --watch from node-sass-chokidar (God forgive me) and currently compiling manually. I will be trying out the extensions that llKreator mentioned though.

[alabama]

@prameshbajra @sebhewelt @llKreator
I had a similar issue, not with the error but with not noticing that files changed. My setup was a host windows machine and a guest linux machine run with virtual box and vagrant. The changes in the sass files were not recognized and node-sass-chokidar was not building, if i changed them on windows in my shared folder.
Like llKreator mentioned I just used the standalone chokidar package (node install chokidar-cli) and configured it to run node-sass-chokidar (could be node-sass as well, cause you don't need watch anymore) if it realized that changes were made:

"build-css": "node-sass-chokidar src/sass/main.scss -o src/css/ --source-map true",
"watch-css": "npm run build-css && chokidar 'src/sass/**/*.scss' -c 'npm run build-css' --polling"

Just call npm run watch-css

Maybe this helps

[xxDukeMCxx]

Hi,

Have the same problem with VSCODE.
Read a lot of issues here and there about the fact that Chokidar detect the file change before VSCODE unlock it. Not a expert at all, but find that add the "--usePolling" param can help with VSCODE (error still raise, but a lot less).
Exemple :

[marcosbozzani]

I've created a PR that fix this problem: sass/node-sass#2386

If want to try this fix, you can patch your node-sass local copy by replacing 'node_modules/node-sass/lib/render.js' with this version: https://github.com/marcosbozzani/node-sass/blob/bug-vscode-watch/lib/render.js

The diff is here: marcosbozzani/node-sass@266861b#diff-a485abf5b8f49de7f313d7799df3faf4

[xxDukeMCxx]

Hi futur readers :)

With the #57 PR available from node-sass-chokidar@1.3, I definitively fix my problem with VSCode by adding thoses parameters into package.json :

[harnerdesigns]

--usePolling --polling-interval 500 worked for me in Sublime Text 3 as well. Thanks @xxDukeMCxx

[pjm4]

--usePolling --polling-interval 500 working for AWS Cloud9 running on Linux - TBH, I think this issue is editor agnostic and an underlying symptom of node-sass-chokidar. My package.json is (based on https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc):

{
  "name": "cv-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive --usePolling --polling-interval 500",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

This issue manifested itself by not compiling properly. Looking at the generated index.css file I can see an empty module exports.push([module.id, "", ""]); was generated when it failed. If I saved the same file a couple more times the module definition would become defined e.g. exports.push([module.id, ".Input .input-group ... ]);

[liuyuan22]

Looks like it has been solved in ST3, Thanks @xxDukeMCxx

[ihd2911]

@xxDukeMCxx Is it merged? I had to replace the file only then it worked

[xxDukeMCxx]

@ihd2911 yes @michaelwayman had done and merge this since version 1.3. thanks to him.
So don't forget to update if you have an older package.

[ihd2911]

This is what i have in my package.json
"node-sass-chokidar": "^1.3.0",

but still i had to replace file

[xxDukeMCxx]

Oh yeah, the polling interval functionnality is present since 1.3.0, but you still have to activate it on your own.