bootstrap-vue · jacobmllr95 · Nov 1, 2020 · Nov 1, 2020 · Nov 1, 2020
diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue
@@ -523,7 +523,7 @@ ul.component-ref-mini-toc:empty {
   display: none;
 }
 
-/deep/ .word-wrap-normal {
+>>> .word-wrap-normal {
   white-space: normal !important;
   word-break: normal !important;
   overflow-wrap: normal !important;

diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue
@@ -118,16 +118,16 @@ export default {
   position: relative;
 }
 
-#bv-icons-table-result /deep/ .bi {
+#bv-icons-table-result >>> .bi {
   font-size: 1.5rem;
 }
 
-.form-group /deep/ .form-text {
+.form-group >>> .form-text {
   text-align: right;
 }
 
 // Icon zoom on hover
-.flip-icon-list-icon /deep/ .card {
+.flip-icon-list-icon >>> .card {
   .bi {
     transition: transform 0.15s;
   }

diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md
@@ -195,10 +195,10 @@ import 'custom.scss'
 
 You can find all of the possible variables in `node_modules/bootstrap/scss/_variables.scss`.
 
-Do not forget to include `node-sass` and `sass-loader` to use `scss` in Vue:
+Do not forget to include `sass` and `sass-loader` to use `scss` in Vue:
 
 ```sh
-npm install --save-dev node-sass sass-loader
+npm install --save-dev sass sass-loader
 ```
 
 **Note:** You may need to adjust the SCSS import paths based on your build environment.

diff --git a/package.json b/package.json
@@ -139,7 +139,6 @@
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
     "marked": "^1.2.2",
-    "node-sass": "^4.14.1",
     "nuxt": "^2.14.7",
     "postcss": "^8.1.4",
     "postcss-cli": "^8.2.0",
@@ -149,6 +148,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "sass": "^1.28.0",
     "sass-loader": "^10.0.4",
     "standard-version": "^9.0.0",
     "terser": "^5.3.8",

diff --git a/scripts/build.sh b/scripts/build.sh
@@ -27,11 +27,11 @@ echo ''
 
 echo 'Compiling ESM modular build...'
 NODE_ENV=esm babel src \
-      --out-dir esm \
-      --ignore 'src/**/*.spec.js' \
-      --ignore 'src/browser.js' \
-      --ignore 'src/browser-icons.js' \
-      --ignore 'src/icons-only.js'
+    --out-dir esm \
+    --ignore 'src/**/*.spec.js' \
+    --ignore 'src/browser.js' \
+    --ignore 'src/browser-icons.js' \
+    --ignore 'src/icons-only.js'
 echo "${BV_BANNER}" | cat - esm/index.js > esm/tmp.js && mv -f esm/tmp.js esm/index.js
 echo 'Done.'
 echo ''
@@ -40,93 +40,91 @@ echo 'Minify JS...'
 # We instruct terser to preserve our `Bv*Event` class names and
 # safe types (i.e. `Element`, etc.) when mangling top level names
 terser dist/bootstrap-vue.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue.js.map,includeSources,url=bootstrap-vue.min.js.map" \
-       --output dist/bootstrap-vue.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue.js.map,includeSources,url=bootstrap-vue.min.js.map" \
+    --output dist/bootstrap-vue.min.js
 terser dist/bootstrap-vue-icons.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue-icons.js.map,includeSources,url=bootstrap-vue-icons.min.js.map" \
-       --output dist/bootstrap-vue-icons.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue-icons.js.map,includeSources,url=bootstrap-vue-icons.min.js.map" \
+    --output dist/bootstrap-vue-icons.min.js
 terser dist/bootstrap-vue.common.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue.common.js.map,includeSources,url=bootstrap-vue.common.min.js.map" \
-       --output dist/bootstrap-vue.common.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue.common.js.map,includeSources,url=bootstrap-vue.common.min.js.map" \
+    --output dist/bootstrap-vue.common.min.js
 terser dist/bootstrap-vue-icons.common.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue-icons.common.js.map,includeSources,url=bootstrap-vue-icons.common.min.js.map" \
-       --output dist/bootstrap-vue-icons.common.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue-icons.common.js.map,includeSources,url=bootstrap-vue-icons.common.min.js.map" \
+    --output dist/bootstrap-vue-icons.common.min.js
 terser dist/bootstrap-vue.esm.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue.esm.js.map,includeSources,url=bootstrap-vue.esm.min.js.map" \
-       --output dist/bootstrap-vue.esm.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue.esm.js.map,includeSources,url=bootstrap-vue.esm.min.js.map" \
+    --output dist/bootstrap-vue.esm.min.js
 terser dist/bootstrap-vue-icons.esm.js \
-       --compress typeofs=false \
-       --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
-       --toplevel \
-       --keep-classnames \
-       --comments "/^!/" \
-       --source-map "content=dist/bootstrap-vue-icons.esm.js.map,includeSources,url=bootstrap-vue-icons.esm.min.js.map" \
-       --output dist/bootstrap-vue-icons.esm.min.js
+    --compress typeofs=false \
+    --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
+    --toplevel \
+    --keep-classnames \
+    --comments "/^!/" \
+    --source-map "content=dist/bootstrap-vue-icons.esm.js.map,includeSources,url=bootstrap-vue-icons.esm.min.js.map" \
+    --output dist/bootstrap-vue-icons.esm.min.js
 echo 'Done.'
 echo ''
 
 echo 'Compile SCSS...'
 # Complete BootstrapVue CSS
-node-sass --output-style expanded \
-          --source-map true \
-          --source-map-contents true \
-          --precision 6 \
-          scripts/index.scss \
-          dist/bootstrap-vue.css
+SASS_PATH=node_modules sass --style expanded \
+    --embed-source-map \
+    --precision 6 \
+    scripts/index.scss \
+    dist/bootstrap-vue.css
 postcss --config scripts/postcss.config.js \
-        --replace dist/bootstrap-vue.css
+    --replace dist/bootstrap-vue.css
 # BootstrapVue Icons only CSS
-node-sass --output-style expanded \
-          --source-map true \
-          --source-map-contents true \
-          --precision 6 \
-          scripts/icons.scss \
-          dist/bootstrap-vue-icons.css
+SASS_PATH=node_modules sass --style expanded \
+    --embed-source-map \
+    --precision 6 \
+    scripts/icons.scss \
+    dist/bootstrap-vue-icons.css
 postcss --config scripts/postcss.config.js \
-        --replace dist/bootstrap-vue-icons.css
+    --replace dist/bootstrap-vue-icons.css
 echo 'Done.'
 echo ''
 
 echo 'Minify CSS...'
 # Complete BootstrapVue CSS
 cleancss --level 1 \
-         --format breaksWith=lf \
-         --source-map \
-         --source-map-inline-sources \
-         --output dist/bootstrap-vue.min.css \
-         dist/bootstrap-vue.css
+    --format breaksWith=lf \
+    --source-map \
+    --source-map-inline-sources \
+    --output dist/bootstrap-vue.min.css \
+    dist/bootstrap-vue.css
 # Icons only CSS
 cleancss --level 1 \
-         --format breaksWith=lf \
-         --source-map \
-         --source-map-inline-sources \
-         --output dist/bootstrap-vue-icons.min.css \
-         dist/bootstrap-vue-icons.css
+    --format breaksWith=lf \
+    --source-map \
+    --source-map-inline-sources \
+    --output dist/bootstrap-vue-icons.min.css \
+    dist/bootstrap-vue-icons.css
 echo 'Done.'
 echo ''
 

diff --git a/scripts/icons.scss b/scripts/icons.scss
@@ -3,9 +3,9 @@
  */
 
 // Include Bootstrap functions, variables, and mixins
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 
 // Import BootstrapVue Icons custom SCSS
 @import "../src/icons.scss";
diff --git a/scripts/index.scss b/scripts/index.scss
@@ -3,9 +3,9 @@
  */
 
 // Include Bootstrap functions, variables, and mixins
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 
 // Import BootstrapVue custom SCSS
 @import "../src/index.scss";