# SCSS (Sass) Variables Not Coverting On Build

**URL:** https://discourse.roots.io/t/scss-sass-variables-not-coverting-on-build/25173
**Category:** sage
**Tags:** sass, bud, sage10
**Created:** 2023-04-16T04:17:54Z
**Posts:** 8

## Post 1 by @lljb3 — 2023-04-16T04:17:55Z

Hello,

I’ve been having issues with trying to set up Bedrock and Sage and had a lot of trial and error to at least get this setup (with SASS) to work on my VM local. I’m currently stuck on compiling SCSS to process variables. I’ve looked at a few [topics](https://discourse.roots.io/t/scss-variables-are-not-working/22779) including [one created 10 days ago](https://discourse.roots.io/t/sage-10-sass-variable-not-converting-on-build/25106) where the solutions do not work for me.

I’ve updated Sage, Bud, and all necessary extensions to 6.12, added PurgeCSS, and configured my bud.config.js file. It’s still giving me compiled CSS like the following:

```
#main-navigation .brand {
    color: $white;
    font-family: $american_captain;
}
```

I’m not certain what to do at this point. I’ve set up Sage 9 in the past which worked for me, but Sage 10 seems to give me more troubles. Any help on why this isn’t working for me would be appreicated. I also set up a [repo](https://github.com/ProdHMD/Bo-Dean/tree/develop/public/web/app/themes/bovember) for someone to take a look at my files if I’m missing anything.

---

## Post 2 by @strarsis — 2023-04-16T04:37:19Z

Some quick checks:

- `npm` package `@roots/bud-sass` installed in the Sage theme (you probably have)?
- (`resources/styles/`)`app.css` renamed to `app.scss`?

---

## Post 3 by @lljb3 — 2023-04-16T04:51:19Z

That’s a check on both.

![image](https://discourse.roots.io/uploads/default/original/2X/2/22bba6d2a817977ebd2818f171eb12af74a485ee.png)

 ![image](https://discourse.roots.io/uploads/default/original/2X/b/b25178771ed997ff493d475df639ce80d34f8712.png)

![image](https://discourse.roots.io/uploads/default/original/2X/b/b02f042ba16a461a3cd2624a1e84a4da87cca556.png)

---

## Post 4 by @strarsis — 2023-04-16T05:09:59Z

A modified Sage 10 example theme with SCSS support:

> **[GitHub - strarsis/sage10-scss: Sage 10 theme with SCSS (minimal example)](https://github.com/strarsis/sage10-scss)**
>
> Sage 10 theme with SCSS (minimal example). Contribute to strarsis/sage10-scss development by creating an account on GitHub.

Clone that repository and invoke `nvm use`; `npm install`; `npm run build`.  
The output `app.[...].css` and `editor.[...].css` (in `public/css/`) directory should both contain the correctly parsed and processed SCSS as valid CSS.

Steps that were taken for preparing this repository (that is known to work correctly with SCSS) (you can also just follow [the commits of that repository](https://github.com/strarsis/sage10-scss/commits/master)):

1. [Create the theme using `composer` (from latest `master` commit)](https://github.com/strarsis/sage10-scss/commit/5cd87de4ac81293e69263a74bbd86d86f54d8231):  
`$ composer create-project roots/sage sage10-scss`  
I had to use the latest master commit (`dev-master`) as otherwise the `@roots/bud-postcss` own dependencies would be incompatible with the Sage theme dependencies.
2. [Using a recent LTS version of `node` (`v18.16.0`). I added a `.nvmrc` file to the sample theme so the same `node` version is used.](https://github.com/strarsis/sage10-scss/commit/4659738238c6912f9cc5ce9e6f071378d1d54216):  
(as by using nvm:) `nvm use lts/*`
3. Installed all base theme `node` dependencies:  
`npm install`
4. [Add `@roots/bud-sass` and `@roots/bud-postcss` `npm` packages as development dependencies](https://github.com/strarsis/sage10-scss/commit/3dee756a9503c6724e63c1a0f5a8359fd9a70392):  
`$ npm install --save-dev @roots/bud-sass @roots/bud-postcss`
5. [Change style entrypoint files extension to `scss`.](https://github.com/strarsis/sage10-scss/commit/cf643f466a392e495d474c4fb64b061a93b38004)
6. [Add some test SCSS to both entrypoint style files.](https://github.com/strarsis/sage10-scss/commit/ec0309b373b1f5cebec67e67306ffc0efa713564)
7. Build the theme (`npm run build`).

You can compare that modified Sage 10 theme with your own to find out what changes were missing or incorrect that lead to your issue.

---

## Post 5 by @ben — 2023-04-16T15:28:45Z

> [@lljb3](#):
>
> I also set up a [repo](https://github.com/ProdHMD/Bo-Dean/tree/develop/public/web/app/themes/bovember) for someone to take a look at my files if I’m missing anything.

Feel free to provide all of the exact steps for a **minimal reproduction** of this issue if you’d like to see this topic listed again. It’s not fair to ask folks to dig through a repo… especially when your screenshots provided here don’t even match what’s in your repo.

I highly suggest just following the official docs: [Replacing Tailwind CSS with Bootstrap | Sage Docs | Roots](https://roots.io/sage/docs/replacing-tailwind-with-bootstrap/)

You shouldn’t be trying to use both postcss and sass.

---

## Post 6 by @ben — 2023-04-16T15:28:49Z



---

## Post 7 by @lljb3 — 2023-04-16T17:46:10Z

I recently updated my repo to closely match the steps from @strarsis. I also referred to the docs to replace Tailwind with Bootstrap.

Here are the exact steps:

1. Created the theme using composer from the latest main commit: `composer create-project roots/sage bovember dev-main`
2. Installed theme dependencies: `yarn`
3. Installed bud-sass and bud-postcss (removed bud-postcss after your comment of not using the two at the same time): `yarn add @roots/bud-sass -dev`
4. Updated styles and editor file extensions to .scss
5. Added test SCSS to app.scss
6. Built the theme: `yarn build`
7. Saw that it was working, then added Bootstrap according to the [doc](https://roots.io/sage/docs/replacing-tailwind-with-bootstrap/)
8. Followed the [doc](https://roots.io/sage/docs/fonts-setup/) to add my own fonts
9. Fonts weren’t resolving according to the docs for some weird reason, so I added aliases to bud.config.js:  
`app.alias('@fonts', app.path('@src/fonts'))`
10. Fonts _still_ weren’t working, so I followed the [doc](https://roots.io/sage/docs/adding-linting/) to add linting
11. Fonts are now resolving, but now the variables are not converting on build.
12. Saw your comment about not using postcss and removed that dependency to see if that would fix the issue and it did not: `yarn remove @roots/bud-postcss`

So somehow, adding linting messed with processing SCSS variables. Is there a dependency I shouldn’t be using for linting if I’m using SCSS?

---

## Post 8 by @lljb3 — 2023-04-16T19:54:30Z

Ok, I did yet _another_ reinstallation of my theme following the exact steps, including adding _all_ of the linting extensions, and it looks like I’m no longer running into this issue.

I also used @strarsis [tip](https://discourse.roots.io/t/tip-bud-alias-bud-alias-in-scss-sass/24208) of making sure to add the tilde sign before the source url in the @font-face declaration, and that is at least resolving and pointing to the correct file. I’m still having an issue of my fonts not actually displaying, but that is another topic I may or may not create.

Closing this.