Hi,
I’m following the Jekyll tutorial and I’m having a problem on the Assets step (https://jekyllrb.com/docs/step-by-step/07-assets/). I’ve updated the Navigation and Default layout files as indicated in the instructions, and created the _assets/css/styles.scss and _sass/main.scss files. On styles.scss VS shows a problem “at-rule or selector expected”.
I thought @import was an at-rule…so I’m confused. Can anyone please help?
I think VS is complaining about the YAML front-matter dashes (---). The front-matter is there to ensure that Jekyll processes the file. Unfortunately this means the top style.scss isn’t valid SCSS, so you’ll have to ignore the error.
Thank you.
Would this be why it doesn’t work then? The current link page should turn green.
I don’t know much of anything about Sass, but I was looking through the documentation, and I did see @import. The way it’s written looks like what was in the documentation, so I guess I’m confused about why it wouldn’t be valid.
The point of using Sass isn’t clearly explained in the tutorial either. From a beginner perspective it just seems as though it’s an extra step. Would it be easier to use CSS in the _assets/css/styles file and do away with the _sass/main.scss file & folder?
I appreciate your help!
I have had issues as well where VS Code doesn’t like the frontmatter in .scss file, squashing it all one the first line.
I switched to this extension as my SCSS formatter and enjoying that.
https://marketplace.visualstudio.com/items?itemName=Sibiraj-S.vscode-scss-formatter
Check out a pattern of a theme.
A theme like minima has assets/main.scss on 2.5 show below (or see assets/css/style.scss on Minima 3)
---
---
@import "minima"
And all your custom styling goes after that import. You can write your code as SCSS or just plain CSS.
You don’t have to define the _sass/ directory in your project, which is where minima defines the code that gets imported with the import above.
If you are making your own theme or a site without a theme, then you might want to use _sass/ to put your styles. Or you might be okay with assets/main.scss or assets/css/styles.css.
See my guide on this topic https://michaelcurrin.github.io/code-cookbook/recipes/jekyll/styling-with-scss/customize.html
Has anyone been able to solve @Kess01331’s problem? I tried doing compiling without VS Code, just through notepad and CMD, still had the same issue.
I’m following the Jekyll same tutorial, and am on a windows box.
Whenever I click on the navigation links I get this error in CMD.
[2021-02-02 20:03:17] ERROR /assets/css/styles.scss’ not found.`
Possibly a typo? The layout should link to the compiled CSS file, style.css, not the original SASS/SCSS source file style.scss. I.e. the stylesheet link in the layout head should look like this (note .css, not .scss):
<link rel="stylesheet" href="/assets/css/styles.css">
Indeed. The SCSS must be compiled by adding frontmatter.
---
---
h1 ...
And referenced as .css as it will be .css in the _site output directory.
Another issue may be not using the GH Pages subpath
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
Yeah that fixed it!
Thanks for the help. Still getting used to how there’s the uncompiled and compiled versions of all of the files.