Dart Sass 3.0.0 incompatibility #1

Open
opened 2025-10-14 16:11:54 -06:00 by navan · 0 comments
Owner

Originally created by @carstene1ns on 10/8/2025

Currently sakura uses the @import rule to include the main css in the themes.
This is deprecated and will stop working soonish.
It then needs to be migrated to @use and @forward.

I am not sure, if using the themes as modules or going the other way around is better, but as a quick fix I came up with this in my current project, which is close to the current structure:

/* theme file, e.g. sakura-dark.scss */

@use "main" with (
	$color-blossom: #ffffff,
	$color-fade: #c9c9c9,

	$color-bg: #222222,
	$color-bg-alt: #4a4a4a,

	/* more variables ... */
);
/* default styles at top of _main.scss file */

$color-blossom: #1d7484 !default;
$color-fade: #982c61 !default;
$color-bg: #f9f9f9 !default;
$color-bg-alt: #f1f1f1 !default;

/* more defaults ... */

This works, but has a little different syntax.

See also:

*Originally created by @carstene1ns on 10/8/2025* Currently sakura uses the `@import` rule to include the main css in the themes. This is deprecated and will stop working soonish. It then needs to be migrated to `@use` and `@forward`. I am not sure, if using the themes as modules or going the other way around is better, but as a quick fix I came up with this in my current project, which is close to the current structure: ```scss /* theme file, e.g. sakura-dark.scss */ @use "main" with ( $color-blossom: #ffffff, $color-fade: #c9c9c9, $color-bg: #222222, $color-bg-alt: #4a4a4a, /* more variables ... */ ); ``` ```scss /* default styles at top of _main.scss file */ $color-blossom: #1d7484 !default; $color-fade: #982c61 !default; $color-bg: #f9f9f9 !default; $color-bg-alt: #f1f1f1 !default; /* more defaults ... */ ``` This works, but has a little different syntax. See also: - https://sass-lang.com/documentation/breaking-changes/import/ - https://coreui.io/blog/how-to-fix-sass-import-rules-are-deprecated-and-will-be-removed-in-dart-sass-3-0-0/
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: github/sakura#1
No description provided.