CODEWITHSUNDEEP
csssassbootstrap-5mixins
AoLiGei
AoLiGei

Reputation: 71

Mixin from multiple global modules error when working with SASS and Bootstrap 5

I am following tutorial from Bootstrap 5 & SASS - 5, trying to learn SASS and Bootstrap for my coming project. I try to use mixin to set a resuable background color. I followed every step but I got error saying

Mixin error

The project structure is like

Project structure

The 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';

The _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;
        }
    }
}

The _mixins.scss:

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

The _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'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></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'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
$accordion-icon-width:1.875rem;
//import bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Could someone tell me where I did wrong?

My second question is, should I always set the @use as global using * or sometimes I should set it to certain name?

Update: It works now if I do not set mixin reference global, such as @use '../components/mixins' as mixins; But I do not include mixin in _custom.scss file explicitly, where does the include come from?

Upvotes: 0

Views: 61

Answers (0)

Related Questions