error message during watch in sass file
when my main.scss with import is being watched and I change + save the file that is being imported, I get this error message regularly (about 25 - 50% of the time):
{
"status": 1,
"file": "C:/Users/Wessel/Desktop/test-folder/SCSS/main.scss",
"line": 1,
"column": 1,
"message": "File to import not found or unreadable: base/reset.",
"formatted": "Error: File to import not found or unreadable: base/reset.\n on line 1 of SCSS/main.scss\n>> @import "base/reset";\n ^\n"
}
it saves and works correctly after a few saves, but i have no idea why i get the above error most of the time. any help?
my folder structure is in the image
25 Replies
You're trying to import "reset" file from "base" folder, but there is no file named "reset" in your "base" folder
As Tenkes said, in the code you posted, it's saying it can't find your
base/reset file, and in the screenshot you posted, it can't find a layout/grid file.this is the actual error message:
{
"status": 1,
"file": "C:/Users/USER/Downloads/advanced-css-course-master/Natours/starter/sass/main.scss",
"line": 12,
"column": 1,
"message": "File to import not found or unreadable: layout/grid.",
"formatted": "Error: File to import not found or unreadable: layout/grid.\n on line 12 of sass/main.scss\n>> @import \"layout/grid\";\r\n ^\n"
}
do note that there is a layout/grid file in my base folder
@Tenkes @KevinI see that you have a
layout/ folder in the screenshot, but we can't see what's in there.
Oh, and looking more closely, the error includes a . after grid. Check the @use to make sure it's layout/grid and not layout/grid.
If it's still not working, take a screenshot of the main.scss so we can see the @use statements, and open all the folders so we can see what's in themi've checked the file naming to make sure it's correct. these are the main.scss import statements. is it supposed to be
@use and not @import?
the folders are also open
@import is discouraged, and has been for a few years now, and they are looking to eventually phase it out completely. You can see more on that here: https://sass-lang.com/documentation/at-rules/import/
What are you using to compile your sass to css? Usually the warnings don't look like that either, and are much cleaner looking.
Just out of curiosity, if you comment out line 12 so it skips the grid import, does it work from there, or do you run into an error with the header?shouldnt the paths start with a period?
instead of
@import "pages/home"; you should have @import "./pages/home";it's basically same, it shouldn't make a difference
did you configure the correct path for sass?
also, since you have it in multiple folders already, i have a better idea for you
inside each folder, create an index.scss file
inside each file, import the files in the folder
then, on the main.scss file, import the name of the folder
i'm compiling with the vs code terminal.
still doesn't work when i comment out line 12.
What error do you get when you comment out line 12?
Can I see a screenshot of your package.json file too?
I wouldn't mind seeing what's inside that
_grid.scss file as well...
It's funny because it's not running into issues with anything above it, since the error is being thrown at that file. If you commente out the line, I'm guessing it's the header file causing the next problem, but again, I'm not sure why with everythign else working. Makes me wonder if something inside those files is causing the issue, though I can't think of anything off the top of my head that would cause that error, but there could be something at play.maybe permission errors?
that can cause the error
it says "file not found or unreadable"
its in the downloads folder, so, it's possible but unlikely
Be really strange that the other folders before it are fine though, that's why I'm so confused. Also why it's important to know what the error when line 12 is commented out... is the error still with the
layout/ folder? If we comment out line 13, does it work? Then we know the issue is with that folder at least. If it still fails, then... it's something else 😅yup, but windows loves blocking downloaded files
but you are absolutely right, the error after commenting line 12 is important
package.json
error after commenting out line 12
oh, i probably just need to restart the entire project from my desktop then and see how it goes?
it's honestly getting very annoying cos now some of my styles don't even work anymore
no
here is something super dumb
try closing vscode and run the command manually, in the directory
ive personally never used node-sass, but i have a feeling
just tried that. same issue. works sometimes, and sometimes the error pops up
that is super weird
First up, node-sass was deprecated like.. 4 or 5 years ago. It's no longer supported.
I was thinking it might have something to do with that when I saw that you were using
@import which is why I asked to see the package.json
I don't know for sure what's causing it, it seems like a really strange issue, but I'd suggest trying to the currently maintained version and seeing if that works instead. It's just an npm install sass -D .
You can then change the compile:sass script, just switching out node-sass for sass.
@import still works with it, at least for now, so that shouldn't cause any problems.
If it still doesn't work, the errors are slightly better, so it might give us a better idea of what the problem is, lol.
If it does work, we can look at removing node-sass from the project entirely, but this will be a fast way to test to see if it's the problem or not firstrunning 
just to be sure, was the problem
npm install sass -D and changing the script from node-sass to sass has worked like magic. no errors for over 20mins now and counting.
really appreciate the help man just to be sure, was the problem node-sass?could have been, yeah. I don't want to say for sure, but it's old and out of date now. Even if it wasn't causing that issue (which it sounds like maybe it was?), you can't even use a lot of modern css features with it without it throwing errors.
makes a lot of sense. thanks again.
i didn't knew that. i've only used
sass
today i learned something