Failed to compile alert.scss

[triathletefr23-zz]

Issue and Steps to Reproduce

Following the guideline example

Versions

1.0.0

Screenshots

Additional Details

• Installed packages:
  @axa-fr/react-toolkit-alert

[guillaumechervetaxa]

Hi @triathletefr23,

Thanks a lot for the reports !
There are bugs on scss. Imports are missing.
@samuel-gomez-axa may fix it very quickly.

You can temporary use the compiled css instead :
@axa-fr/react-toolkit-alert/dist/af-alert.css

[samuel-gomez-axa]

Hi @guillaumechervetaxa ,

There are 2 possible solutions, in both cases it will be necessary to create in the core package, a SASS file regrouping all mixins, functions and SASS variables, like this :

@axa-fr/react-toolkit-core/src/common/scss/core.scss

SOLUTION 1: add it on all packages

Either we add in each .scss file of each package, the dependencies of @axa-fr/react-toolkit-core :
This implies having dependency on all packages.

Example with the Header/dist/header.scss :

@import '../../node_modules/@axa-fr/react-toolkit-core/src/common/scss/core';
 
.af-header {
  &__content {
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}
 
@include media-breakpoint-up(sm) {
  .af-header {
    &__wrapper {
      width: 100%;
    }
  }
}

@include media-breakpoint-up(md) {
  .af-header {
     &__wrapper {
      width: nth(nth($container-max-widths, 4), 2);
      max-width: 100%;
    }
     &__content {
      flex-wrap: initial;
    }
  }
}

SOLUTION 2 : add it on project, use-it directly in project

All you need is the @axa-fr/react-toolkit-core package on your project (in addition to the individually installed components)
Then import the same file into the SASS file of the component.

For example : myfooter.scss

@import '../../../node_modules/@axa-fr/react-toolkit-core/dist/assets/scss/core';
@import '@axa-fr/react-toolkit-layout-footer/dist/footer.scss';
@import '@axa-fr/react-toolkit-layout-header/dist/Logo/logo.scss';

Which solution seems to be the best ?

[guillaumechervetaxa]

I'am for the solution 1 @samuel-gomez-axa :)

Each component should be completly autonomous ! Just plug and play.
Components have already the "core" dependency