Being a newbie, there has been some head banging frustrations along the way, but with every obstacle there is always light at the end of the tunnel.
Common Causes of Sass Compiling Problems
I had to stop the server and restart it when…
- Blank element or property
- A syntax error in Sass file
- @import partials sass files without having the proper file name.
Blank Element or Property
Leaving a property will cause the compiling to stop with or without an error. Error: Blank element
Solution:
Comment the property entirely or delete.
Syntax Error
Any CSS or Sass syntax error will stop the compiling process, so don’t forget the semicolons.
Solution:
Install Prettier to help with small and common mistakes.
@import partials
Importing as been a bit confusing for me but as I have learned the wrong and right way to handling partials in Jekyll and in a simple setup with just VS Code.
Visual Studio Code
Extension Install Requirements:
- Live Server
- Live Sass Compiler
Error:
When using Live Server to preview your work in a browser and you also want to use Sass. The Live Sass Compiler extension is very helpful. A mistake that I had made when working with partials is that I didn’t have the underscore before the partial file.
Solution:
What I was trying to do is make a partial Sass with the header CSS (./sass/partials/header.scss) and then importing it into the homepage Sass file (./sass/homepage.scss).
When you are importing a file into another you must have a ‘_’ (underscore) in front of the partial file.
Note: the file extension is not necessary.
Another Example:
_base.scss imported into _header.scss files (note: base and header files are in the same folder).
Conclusion:
To be continue…