# SCSS changes are not getting compiled except in 1 file

**URL:** https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876
**Category:** Help
**Created:** [April 13, 2021, 5:57pm UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876 "2021-04-13T17:57:02Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![vsiege](https://avatars.discourse-cdn.com/v4/letter/v/db5fbb/32.png) [@vsiege](https://talk.jekyllrb.com/u/vsiege)
#### Post date: [April 13, 2021, 5:57pm UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/1 "2021-04-13T17:57:02Z")

</div>

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
```

---

<div class="post-metadata">

### Author: ![vsiege](https://avatars.discourse-cdn.com/v4/letter/v/db5fbb/32.png) [@vsiege](https://talk.jekyllrb.com/u/vsiege)
#### Post date: [April 13, 2021, 6:46pm UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/2 "2021-04-13T18:46:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)
#### Post date: [April 14, 2021, 11:33am UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/3 "2021-04-14T11:33:21Z")

</div>

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

```auto
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.

> <https://github.com/MichaelCurrin/jekyll-blog-demo/blob/master/_config.yml#L36>

---

<div class="post-metadata">

### Author: ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)
#### Post date: [April 14, 2021, 11:39am UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/4 "2021-04-14T11:39:21Z")

</div>

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

```auto
_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.

> **[jekyll/minima](https://github.com/jekyll/minima)**
>
> Minima is a one-size-fits-all Jekyll theme for writers.

---

<div class="post-metadata">

### Author: ![vsiege](https://avatars.discourse-cdn.com/v4/letter/v/db5fbb/32.png) [@vsiege](https://talk.jekyllrb.com/u/vsiege)
#### Post date: [April 17, 2021, 10:42pm UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/5 "2021-04-17T22:42:39Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![vsiege](https://avatars.discourse-cdn.com/v4/letter/v/db5fbb/32.png) [@vsiege](https://talk.jekyllrb.com/u/vsiege)
#### Post date: [April 17, 2021, 10:52pm UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/6 "2021-04-17T22:52:07Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)
#### Post date: [April 18, 2021, 6:01am UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/7 "2021-04-18T06:01:26Z")

</div>

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)

```auto
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.

> **[esbuild](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/javascript/packages/esbuild.html)**
>
> A collection of code snippets and CLI guides for quick and easy reference while coding

And of course linting with eslint.

```auto
npx eslint .

```

I don’t know about alternatives for image processing.

---

<div class="post-metadata">

### Author: ![vsiege](https://avatars.discourse-cdn.com/v4/letter/v/db5fbb/32.png) [@vsiege](https://talk.jekyllrb.com/u/vsiege)
#### Post date: [April 28, 2021, 5:38am UTC](https://talk.jekyllrb.com/t/scss-changes-are-not-getting-compiled-except-in-1-file/5876/8 "2021-04-28T05:38:36Z")

</div>

Thank you for passing this along!
