使用SASS和Bootstrap 5时多全局模块Mixin报错问题咨询

背景 #

我正在跟随Bootstrap 5 & SASS系列教程的第5节学习SASS和Bootstrap，为后续项目做准备。尝试用Mixin实现可复用背景色，按步骤操作后出现报错（报错截图：）。项目结构如下（项目结构截图：）：

style.scss #

@use 'custom';

@use 'components/animations';
@use 'components/buttons';
@use 'components/mixins';
@use 'components/typography';


@use 'sections/companies';
@use 'sections/faq';
@use 'sections/footer';
@use 'sections/intro';
@use 'sections/navbar';
@use 'sections/portfolio';
@use 'sections/services';
@use 'sections/start';
@use 'sections/testimonials';

_navbar.scss #

@use '../custom' as *;
@use '../components/mixins' as *;

.navbar-bg-custom {
    @include gradient-bg;

    li {
        padding: 0 0.7rem;

        a {
            color: $white !important;
            text-transform: capitalize;
            font-weight: 600;
        }
    }
}

_mixins.scss #

@use '../custom' as *;
@mixin gradient-bg {
    background: linear-gradient(to right, rgba($primary, 0.95), rgba($secondary, 0.95));
}

_custom.scss #

//theme colors
$purple-dark:  #9926f0;
$purple-light:  #bb6ef5;
$pink:    #d122e3;

$primary:$purple-dark;
$secondary:$pink;

//white and gray
$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

//accordion overrides
$accordion-icon-color:$primary;
$accordion-icon-active-color:$secondary;
$accordion-button-icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/></svg>");
$accordion-icon-width:1.875rem;
//import bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";

问题与解答 #

1. 出现该报错的原因是什么？ #

这是模块重复引入导致的命名冲突：主文件style.scss已经通过@use 'components/mixins';引入了mixins模块，而_navbar.scss又用@use '../components/mixins' as *;全局暴露该模块的所有成员。Sass中@use会保证模块只加载一次，但全局暴露会把gradient-bg混入直接放到当前作用域，和主文件中无别名引入的模块成员产生命名冲突，触发报错。

2. 是否应始终使用@use *全局引入模块，还是需指定别名？ #

绝对不建议始终用@use ... as *全局引入：

• 全局引入会把模块内所有变量、混入、函数直接暴露，极易引发命名冲突，就像这次遇到的问题。
• 指定别名（比如@use '../components/mixins' as mx;）能明确区分不同模块的成员，代码可读性更高，后期维护也更方便。
• 只有当模块成员是全局通用且不会和其他模块冲突时，才适合考虑全局引入（比如_custom.scss的颜色变量），但也要谨慎使用。

3. 将Mixin引入改为指定别名后可正常运行，但未在_custom.scss中显式引入Mixin，疑惑其生效来源。 #

Sass的@use是文件级独立作用域的：你在_navbar.scss里用@use '../components/mixins' as mixins;引入后，该文件内部就能通过@include mixins.gradient-bg;使用这个混入，完全不需要_custom.scss引入它。之前报错是因为全局引入导致的命名冲突，改成指定别名后，_navbar.scss里的混入是通过别名访问的，和主文件的无别名引入不会冲突，所以编译正常。

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