SCSS (Sass) Variables Not Coverting On Build

sage
, ,
1

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 including one created 10 days ago 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 for someone to take a look at my files if I’m missing anything.

2

Some quick checks:

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

That’s a check on both.

image

image
image228×749 17.2 KB

image

4

A modified Sage 10 example theme with SCSS support:

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):

  1. Create the theme using composer (from latest master commit):
    $ 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.:
    (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 :
    $ npm install --save-dev @roots/bud-sass @roots/bud-postcss
  5. Change style entrypoint files extension to scss.
  6. Add some test SCSS to both entrypoint style files.
  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.

5

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

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

7

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
  8. Followed the doc 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 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?

8

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