Sage 10: Unable get SASS working

sage
, , ,
1
  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)

2

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?

3

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!

4

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

5

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!

6
  • 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)

7

Just come across this whilst having the same problem myself. For those still struggling…

You don’t need nodemon, you just need to update the watch directories in your bud.config.js file to include the directory containing your sass files:

/**
     * Matched files trigger a page reload when modified
     * @see {@link https://bud.js.org/docs/bud.watch/}
     */
    .watch(['resources/views', 'resources/styles', 'app'])

@prabuvenkat you won’t see the stylesheet in the inspector whilst using yarn dev because bud injects styles using its hot module replacement for development purposes.

1 Like