Fix param override when importing bootstrap via @use

shlinkio · Jan 27, 2025 · de2529a · de2529a
1 parent b6590aa
commit de2529a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -156,10 +156,12 @@ Make sure you import stylesheets in the order documented here for everything to
 
 ```scss
 // src/index.scss
-@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet. Includes SASS var overrides
-@import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
-@import 'node_modules/@shlinkio/shlink-web-component/dist/index';
+@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet
+@use 'node_modules/bootstrap/scss/bootstrap.scss' with (
+  $primary: base.$mainColor // Override bootstrap's primary color
+);
+@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
+@use 'node_modules/@shlinkio/shlink-web-component/dist/index' as c-index;
 ```
 
 ```tsx

diff --git a/dev/index.scss b/dev/index.scss
@@ -1,5 +1,7 @@
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@use '../node_modules/bootstrap/scss/bootstrap.scss';
+@use '../node_modules/bootstrap/scss/bootstrap.scss' with (
+  $primary: base.$mainColor
+);
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/index';
 @use '../src/index.scss' as dev-index;