SCSS changes are not getting compiled except in 1 file

Help
1

I have a similar setup in another project , but for some reason it’s not working here. I need a second pair of eyes to help me run down the issue.

Issue
I am using live reload, and can verify it’s working as it relates to changes to my JavaScript, HTML, Liquid, and 1 SCSS file. How can I tell? The output in the Terminal reflect the file(s) I made changes to, then I see the page(s) reload in the browser. Unfortunately, I do not see updates to this page when I make changes to all but 1 SCSS file (the file all of them get imported to). If I quit the Jekyll serve… command, then rerun the command I see the latest SCSS file changes.

Command
bundle exec jekyll serve --livereload

Jekyll Verison
gem "jekyll", "~> 4.0.0"

Directory & File Setup

src
    ├── _collections
    ├── _data
    ├── _layoutPartials
    ├── _layouts
    ├── _plugins
    ├── assets
    ├── css
     |    └── min-styles.scss (only SCSC file that if I update - shown in terminal)
    │   └── src
    │       ├── common
    │       ├── layouts
    │       └── navigation
    └── js

Contents of min-styles.scss

---
---
@import 'src/common/reset';
@import 'src/common/fonts';
@import 'src/common/global_vars';
@import 'src/common/mixins';
@import 'src/common/extensions';
@import 'src/common/global';
@import 'src/navigation/navGlobal';
@import "src/layouts/home";
.body{
background:green; // this style is compiled just fine
}

Contents of _config.yml for SCSS

sass:
  sass_dir: css
  style: compressed
2

Answering my own question. In my _config.yml I modified the exclusion code slightly:

Original
exclude: ["README.md","node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/","Gem*","_ruby_vendor","_cmds","css/src","js/src","package*.json"]

Edited
exclude: ["README.md","node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/","Gem*","_ruby_vendor","_cmds",'css/src/*.scss', "js/src","package*.json"]

My SCSS is now getting compiled and live reload is reflecting the changes. Thanks for looking over the post. Hope that helps someone in the community.

1 Like
3

For readability, I recommend multi line YAML code in your config

exclude: 
 - README.md
 - node_modules/
 - vendor/
 - "Gem*"
 # ...

Note that you only have to exclude vendor to get its subdirs excluded too.

And quotes are optional. Except they are needed when using a star at the start or end.

4

It seems weird that you are excluding your scss files.

Instead of that rule, you can use underscores for partials to be imported into other scss files and ignored as standalone by files

_foo.scss

You might also want to put your scss files in _sass which is an underscore directory which again will get excluded by Jekyll.

I recommend checking out sass dir and assets CSS dir of minima theme for an example structure.

5

Copy that. Original file came directly from the Jekyll website. I picked the _config.yml fileso that I could see all options available. I will take your advice on vendor/ Thank you. Happy to report everything is working great.

1 Like
6

Thank you. Happy to report everything is working great.

I left out of my original post (as to keep it very focused on the issue), that I am running Gulp 4 & NodeJS tasking to address topics such as

  1. Concatenate/combine all JavaScript files before further processing
  2. Lint, minify, obfuscate, create source maps, and the rename as necessary
  3. image processing
  4. and a few other things

Jekyll just works the Liquid and SCSS aspect.

Then on push to the repo, I have it run through my CI/CD, build, run tests, and finally deploy to appropriate environment (depending on the branch).

Hoping you are having a great weekend and thanks for responding to my post!

1 Like
7

Thanks for the info.

For interested I started using ESBuild which claims to be much faster than other tools.

You can install it with NPM or use it without installing. This works locally and on GH Actions (where Node is already setup)

npx esbuild build/bundle.js --outfile=build/bundle.min.js --minify --sourcemap

Zero config needed. It will bundle and minify and generate source maps. Point it at your app entry point and you’ll get a single JS file from all your modules and libraries. Or point at a directory and get a file for each.

And of course linting with eslint.

npx eslint .

I don’t know about alternatives for image processing.

8

Thank you for passing this along!

1 Like