From 7e876028e851dbe257c4b57215369aae7cf5893b Mon Sep 17 00:00:00 2001 From: kpawelczak <42094017+kpawelczak@users.noreply.github.com> Date: Wed, 8 Jan 2025 10:52:32 +0100 Subject: [PATCH] no bootstrap spartacus installation (#19797) --- docs/migration/2211_ng18/bootstrap.md | 4 +-- extra-webpack.config.js | 1 - feature-libs/cart/_index.scss | 6 ++-- feature-libs/checkout/_index.scss | 6 ++-- feature-libs/organization/_index.scss | 6 ++-- .../administration/styles/_buttons.scss | 2 +- feature-libs/pickup-in-store/_index.scss | 6 ++-- .../styles/_my-preferred-store.scss | 2 +- .../product-multi-dimensional/_index.scss | 6 ++-- feature-libs/product/_index.scss | 6 ++-- feature-libs/qualtrics/_index.scss | 6 ++-- feature-libs/quote/_index.scss | 6 ++-- feature-libs/storefinder/styles/_index.scss | 6 ++-- .../epd-visualization/_index.scss | 6 ++-- integration-libs/opf/_index.scss | 6 ++-- .../schematics/src/add-spartacus/index.ts | 21 ++++++++++++- projects/storefrontapp/src/styles.scss | 31 ++++++++++--------- .../scss/cxbase/_functions.scss | 2 +- .../storefrontstyles/scss/cxbase/_mixins.scss | 2 +- .../scss/cxbase/_variables.scss | 2 +- 20 files changed, 76 insertions(+), 57 deletions(-) diff --git a/docs/migration/2211_ng18/bootstrap.md b/docs/migration/2211_ng18/bootstrap.md index 5741d6a56d8..47ec498ff98 100644 --- a/docs/migration/2211_ng18/bootstrap.md +++ b/docs/migration/2211_ng18/bootstrap.md @@ -9,7 +9,7 @@ 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 @@ -17,7 +17,7 @@ 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 index bf04d0dcb11..00beacece3d 100644 --- 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 index 3ae58ec3189..f8f6762cb7d 100644 --- 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 index b370e04e57e..3c08646dd84 100644 --- 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 index f2ed6ece68d..26135d79a78 100644 --- 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 index aa133d99da5..07ba6a546b0 100644 --- 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 index 7c87d9a80b1..35d81670c0e 100644 --- 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 index a92fd72028a..e33a3484a9e 100644 --- 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 index 37c76fc264a..f1d41316390 100644 --- 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 index a8e59fa07cb..e888378601c 100644 --- 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 index 767d7465c1e..40133e09beb 100644 --- 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 index 1db41aa24ad..906297ef83c 100644 --- 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 index 8b39e5ffd6b..2b7fbba1fac 100644 --- 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 index 1ce9564b3bd..b766aaf0b6f 100644 --- 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 index b580897e5b0..2ae3667606a 100644 --- 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 index 5b3b2089556..8ffc286caa7 100644 --- 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 index 583c5574a13..99074161641 100644 --- 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 index af379dd82b2..f0ee9e42612 100644 --- 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 index 8cb54bc1f8a..88bf46f27e2 100644 --- 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 index ccff4f5c88f..5886943040e 100644 --- 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;