SCSS中Mixin出现变量未找到错误的技术咨询

It’s frustrating when your forms partial can access variables just fine but your breadcrumb mixin can’t—let’s break down why this might be happening and how to fix it.

Common Causes & Solutions #

1. Typos or Case Sensitivity Issues #

Double-check that the variable names in your _mixins/breadcrumb.scss exactly match those in _variables.scss. Sass variables are case-sensitive, so $errorInputText is not the same as $ErrorInputText or $error-input-text. Even a tiny typo (like missing a hyphen or using the wrong case) will trigger this error.

2. The Mixin is Being Imported Elsewhere Without Variables #

If your breadcrumb mixin is imported in another partial file (e.g., _navbar.scss) that doesn’t first import _variables.scss, Sass will throw an error when processing that file. Unlike your _forms.scss which is imported right after variables in styles.scss, other imports of the mixin won’t inherit the variables unless they’re loaded first.

Fix: For any file that imports the breadcrumb mixin, add the variables import before it:

@import '../variables'; // Adjust path to match your project structure
@import '../mixins/breadcrumb';

Or, better yet, create a master import file (like _base.scss) that loads variables first, then all mixins, and import that file wherever you need access to both.

3. Import Variables Directly in the Mixin File #

To ensure your breadcrumb mixin always has access to the variables it needs—no matter where it’s imported—add the variables import at the top of _mixins/breadcrumb.scss:

@import '../variables'; // Make sure the relative path is correct

// Your mixin code here
@mixin breadcrumb {
  // Use variables from _variables.scss
  box-shadow: 0 1px 3px $pillsShadowColor;
  // ... other styles
}

This is a bit redundant if you’re already importing variables in styles.scss, but it guarantees the mixin has access to the variables independently, which can prevent errors in larger projects.

4. Verify Variable Scope #

Make sure none of your variables in _variables.scss are nested inside a selector or another mixin. Variables defined inside a selector are scoped to that selector and won’t be accessible globally. For example, this would cause an error:

// Wrong: Variable is scoped to .container
.container {
  $pillsShadowColor: #d8d8d8;
}

Your variables should be defined at the top level of _variables.scss to be globally accessible.

内容的提问来源于stack exchange，提问作者BlackHoleGalaxy