no bootstrap spartacus installation (#19797)

SAP · Jan 8, 2025 · 7e87602 · 7e87602
1 parent 2f39a22
commit 7e87602
Show file tree

Hide file tree

Showing 20 changed files with 76 additions and 57 deletions.
diff --git a/docs/migration/2211_ng18/bootstrap.md b/docs/migration/2211_ng18/bootstrap.md
@@ -9,15 +9,15 @@
    styles to be applied correctly.
 ### Steps to Update:
 1. Place the following import for styles-config at the top of the file:
-   ```@import 'styles-config';```
+       ```@import 'styles-config';```
 2. Add Spartacus core styles first. Importing Spartacus styles before Bootstrap ensures core styles load as a
    priority.
 3. Follow this by importing Bootstrap styles using the Bootstrap copy provided by Spartacus. Ensure the order of
    Bootstrap imports matches the sequence below for consistency.
 4. Conclude with the Spartacus index styles.
 
 
-Final file structure should look like this:
+   Final file structure should look like this:
 
 ```styles.scss
 // ORDER IMPORTANT: Spartacus core first

diff --git a/extra-webpack.config.js b/extra-webpack.config.js
@@ -23,7 +23,6 @@ module.exports = {
   ],
   resolve: {
     fallback: {
-      bootstrap: path.join(__dirname, 'projects/styles/bootstrap-copy'),
       '@spartacus/styles': path.join(__dirname, 'projects/storefrontstyles'),
       '@spartacus/user': path.join(__dirname, 'feature-libs/user'),
       '@spartacus/organization': path.join(

diff --git a/feature-libs/cart/_index.scss b/feature-libs/cart/_index.scss
@@ -2,9 +2,9 @@
 @import '@spartacus/styles/scss/cxbase/blocks/modal';
 @import '@spartacus/styles/scss/misc/table';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/checkout/_index.scss b/feature-libs/checkout/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/mixins';
 
 @import './base/index';
 @import './b2b/index';

diff --git a/feature-libs/organization/_index.scss b/feature-libs/organization/_index.scss
@@ -1,9 +1,9 @@
 @import '@spartacus/styles/scss/core';
 
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/organization/administration/styles/_buttons.scss b/feature-libs/organization/administration/styles/_buttons.scss
@@ -1,5 +1,5 @@
 %buttons {
-  @import 'bootstrap/scss/buttons';
+  @import '@spartacus/styles/vendor/bootstrap/scss/buttons';
   a.link,
   button.link {
     @extend .btn, .btn-link, .btn-sm;

diff --git a/feature-libs/pickup-in-store/_index.scss b/feature-libs/pickup-in-store/_index.scss
@@ -4,8 +4,8 @@ $cx-color-link-primary: #1672b7;
 @import '@spartacus/styles/scss/cxbase/blocks/modal';
 @import '@spartacus/styles/scss/misc/table';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
diff --git a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss
@@ -1,5 +1,5 @@
 %cx-my-preferred-store {
-  @import 'bootstrap/scss/buttons';
+  @import '@spartacus/styles/vendor/bootstrap/scss/buttons';
 
   .cx-store-opening-hours-toggle {
     @include type('6');

diff --git a/feature-libs/product-multi-dimensional/_index.scss b/feature-libs/product-multi-dimensional/_index.scss
@@ -1,7 +1,7 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './selector/index';
diff --git a/feature-libs/product/_index.scss b/feature-libs/product/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/qualtrics/_index.scss b/feature-libs/qualtrics/_index.scss
@@ -1,7 +1,7 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
diff --git a/feature-libs/quote/_index.scss b/feature-libs/quote/_index.scss
@@ -1,9 +1,9 @@
 @import '@spartacus/styles/scss/core';
 @import '@spartacus/styles/scss/app';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/storefinder/styles/_index.scss b/feature-libs/storefinder/styles/_index.scss
@@ -1,6 +1,6 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/mixins';
 
 @import './components/index';
 @import './layout/index';
diff --git a/integration-libs/epd-visualization/_index.scss b/integration-libs/epd-visualization/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
 

diff --git a/integration-libs/opf/_index.scss b/integration-libs/opf/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 @import '@spartacus/checkout';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 @import './base/styles/index';
 @import './checkout/styles/index';
 @import './cta/styles/index';

diff --git a/projects/schematics/src/add-spartacus/index.ts b/projects/schematics/src/add-spartacus/index.ts
@@ -148,7 +148,26 @@ function installStyles(options: SpartacusOptions): Rule {
       styleFilePath
     );
     let insertion =
-      `\n@import '${relativeStyleConfigImportPath}';\n` +
+      `@import '${relativeStyleConfigImportPath}';\n` +
+      `\n// ORDER IMPORTANT: Spartacus core first\n` +
+      `@import '@spartacus/styles/scss/core';\n\n` +
+      `// ORDER IMPORTANT: Copy of Bootstrap files next\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/reboot';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/type';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/grid';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/utilities';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/transitions';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/card';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/nav';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/buttons';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/forms';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/modal';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/close';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/alert';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';\n\n` +
+      `// ORDER IMPORTANT: Spartacus styles last\n` +
       `@import '@spartacus/styles/index';\n`;
 
     if (options?.theme) {

diff --git a/projects/storefrontapp/src/styles.scss b/projects/storefrontapp/src/styles.scss
@@ -4,21 +4,22 @@
 @import '@spartacus/styles/scss/core';
 
 // ORDER IMPORTANT: Bootstrap next
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/custom-forms';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/tooltip';
+
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+@import '@spartacus/styles/vendor/bootstrap/scss/type';
+@import '@spartacus/styles/vendor/bootstrap/scss/grid';
+@import '@spartacus/styles/vendor/bootstrap/scss/utilities';
+@import '@spartacus/styles/vendor/bootstrap/scss/transitions';
+@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';
+@import '@spartacus/styles/vendor/bootstrap/scss/card';
+@import '@spartacus/styles/vendor/bootstrap/scss/nav';
+@import '@spartacus/styles/vendor/bootstrap/scss/buttons';
+@import '@spartacus/styles/vendor/bootstrap/scss/forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/modal';
+@import '@spartacus/styles/vendor/bootstrap/scss/close';
+@import '@spartacus/styles/vendor/bootstrap/scss/alert';
+@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';
 
 // ORDER IMPORTANT: Spartacus styles last
 @import '@spartacus/styles';
diff --git a/projects/storefrontstyles/scss/cxbase/_functions.scss b/projects/storefrontstyles/scss/cxbase/_functions.scss
@@ -1,3 +1,3 @@
-@import 'bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
 @import 'functions/spacer';
 @import 'functions/merge';
diff --git a/projects/storefrontstyles/scss/cxbase/_mixins.scss b/projects/storefrontstyles/scss/cxbase/_mixins.scss
@@ -4,7 +4,7 @@
 // we load variables through the theme import.  */
 @import '../theme';
 
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './mixins/reset';
 @import './mixins/weight';

diff --git a/projects/storefrontstyles/scss/cxbase/_variables.scss b/projects/storefrontstyles/scss/cxbase/_variables.scss
@@ -10,7 +10,7 @@
 // The Sparta buttons use uppercase type but future themes may want normal case
 // so a variable was created to make this available for other themes.
 @import 'functions';
-@import 'bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
 
 $background: $white !default;
 $inverse: $white !default;