Sage 10 - Not processing @each and $variables anymore?

sage
1

Hey all,

I’ve installed the latest v10.8.2 theme and started fresh. Then I’ve copied a piece of SCSS from a previous project. But it doesn’t seem to render the entire styles anymore.

An example is this file colors.scss:

@use "sass:map";

$col_primary: "#ffd500";
$col_secondary: "#f29dbf";
$col_tertiary: "#ffffff";

$colors: (
  (
    slug: "primary",
    value: $col_primary,
  ),
  (
    slug: "secondary",
    value: $col_secondary,
  ),
  (
    slug: "tertiary",
    value: $col_tertiary,
  ),
);


:root {

  @each $color in $colors {
    $slug: map-get($color, "slug");
    $value: map-get($color, "value");

    #{--#{$slug}}: #{$value};
    #{--#{$slug}-root}: #{$value};
  }

}

package.json part:

  "devDependencies": {
    "@alpinejs/intersect": "^3.13.8",
    "@roots/bud": "6.20.0",
    "@roots/bud-postcss": "^6.20.0",
    "@roots/bud-prettier": "6.20.0",
    "@roots/bud-purgecss": "6.20.0",
    "@roots/bud-sass": "^6.20.0",
    "@roots/bud-stylelint": "^6.20.0",
    "@roots/bud-tailwindcss": "6.20.0",
    "@roots/sage": "6.20.0",
    "alpinejs": "^3.13.8"
  },

It seems like it’s not processing the SCSS. When I check the front-end render I see the litteral code SCSS code above in de the inline CSS.

There must be a part I forgot :slight_smile:

2

You may find this repository with the required Sage 10 adjustment for SCSS interesting:

3

Hey @strarsis thanks for the reply. That’s a nice reference.

Needless to say this was a whoopsie. I’ve forgotten to rename the CSS to SCSS… Done it a dozen of times before…

4

This is indeed an important step, it is also documented as commit of the example repository.

A SCSS helper tool (an acorn CLI command) would be a nice addition as this automatically takes care of all the necessary little steps.

5

Ah yes. +1 for the CLI command. Maybe it can be as command included in the package.json. Even though you run it one time. It would be easier accessible to the main public. Yes, still a RTFM. Even though I’ve read the docs multiple times, my eyes just skipped it, I guess.