Sage 10: Unable get SASS working

  1. Removed tailwindcss. Added bud-sass.
  2. Renamed app.css → app.scss
  3. Added a variable:
$bg-color: #ffc;

body {
  background-color: $bg-color;
}
  1. $ yarn dev
  2. app.scss is displayed in the build list, but is only copied to public folder as-is.
  3. Inspecting the localhost:3000 shows that the styles are not transferred in.

Does it require any further configuration ? How to get bad compile the scss file and include the generated css file into the final bundle ?

===
roots/bud 5.8.7
roots/bud-sass 5.8.7
roots/sage 5.8.7
(have also tried with roots/bud-postcss 5.8.7)

Pardon my ignorance (maybe I’m asking a dumb question), but why are you renaming app.css to app.scss? Is the intention not to write styles in app.scss and have that compiled to CSS?

I decided to use nodemon to watch for changes to .scss files and do a full yarn build.

This is quite sub-optimal, and will greatly appreciate if someone can help me achieve this with a yarn dev.

thanks in advance!

I’m brand new to Sage, wanting to use SCSS instead of Tailwind as well. Are there docs for swapping out/adding SCSS?

I simply removed @roots/bud-tailwindcss from package.json (you can also use yarn remove @roots/bud-tailwindcss), removed the tailwind config file and added the following:

  "devDependencies": {
    "@roots/bud": "^5.8.7",
    "@roots/bud-postcss": "^5.8.7",
    "@roots/bud-sass": "^5.8.7",
    "@roots/sage": "^5.8.7",
    "nodemon": "^2.0.16"
  }
  "scripts": {
    "dev": "nodemon -e scss --exec yarn build",
  }

Have updated the default dev script to the above, in case you need it.

Here on, i renamed app.css → app.scss. When I make edits to my .scss files, nodemon picks it up and does a full build. I wait and reload the site to verify/test changes.

Hope this helps!

  • Add packages to package.json
  • yarn
  • run ‘yarn build’ once (may help sometimes)
  • yarn dev

Otherwise it should work. For me it does. The only difference is that I’m on version 5.7.7 and I do have bud-postcss installed (which you tried already)