SCSS Compilation Errors

Symptom

A deployment fails with an SCSS-specific error. The error message references a .scss or .sass file and includes a line number, column number, and a code snippet from the Dart Sass compiler.

Example:

SCSS error in styles/main.scss at line 12, column 8

  11 | .container {
> 12 |   colr: red;
           ^
  13 | }

Error: Expected expression.

Likely Causes

1. Syntax error in SCSS: Typo in a property name, missing semicolon, unclosed block, invalid nesting.
2. Undefined variable or mixin: Referencing a $variable or @mixin that is not defined in the file or any imported partial.
3. Missing partial file: An @use or @import references a partial file (e.g., @use 'variables') that does not exist in the project.
4. SASS indented syntax errors: .sass files use indentation-based syntax. Mixing SCSS brace syntax in a .sass file causes parse failures.
5. Deprecated SCSS features: Dart Sass has deprecated some legacy features (e.g., @import in favor of @use, / for division in favor of math.div()). While these currently produce warnings, future Dart Sass versions may reject them.

Checks

1. Open the file referenced in the error message and navigate to the indicated line.
2. Check for obvious typos: misspelled property names, missing colons or semicolons, unclosed braces.
3. If the error references an undefined variable ($primary-color), search for its definition across your SCSS files. Variables must be @use'd or @import'd from the file that defines them.
4. If the error references a missing file, verify the partial exists in the file tree. SCSS partials are resolved by file name (with or without the leading _ and the .scss extension).
5. Check the file extension: .scss files use brace syntax, .sass files use indentation syntax. Ensure you are using the correct syntax for the file type.

Fixes

Fix syntax errors

Correct the code at the indicated line. Common fixes:

• Add the missing semicolon at the end of a declaration.
• Close an unclosed brace }.
• Fix a misspelled property name (e.g., colr to color).

Define missing variables

Either define the variable in the same file or import the file that defines it:

// _variables.scss
$primary-color: #9ad8ff;

// main.scss
@use 'variables';

.button {
  color: variables.$primary-color;
}

Fix missing partials

1. Verify the partial file exists in the file tree.
2. Check the import path. @use 'variables' resolves to _variables.scss or variables.scss in the same directory.
3. If the partial is in a subdirectory, include the path: @use 'abstracts/variables'.
4. Create the missing file if it was deleted or never added.

Convert deprecated syntax

Replace @import with @use:

// Deprecated:
@import 'variables';
.button { color: $primary-color; }

// Updated:
@use 'variables';
.button { color: variables.$primary-color; }

Replace / division with math.div():

@use 'sass:math';

.container {
  width: math.div(100%, 3);
}

What to Capture for Escalation

1. The full error message from the Problems panel (file, line, column, message).
2. The content of the SCSS file at the indicated line (copy 5 lines above and below).
3. A list of all SCSS files in the project and their import relationships.
4. Whether the project uses .scss or .sass files (or both).
5. Whether the error appeared after adding or renaming a file.