Skip to content

Commit ed79c07

Browse files
committed
chore(core): allow advanced scss import
1 parent 7e4f160 commit ed79c07

File tree

2 files changed

+34
-8
lines changed

2 files changed

+34
-8
lines changed

docs/markdown/intro/README.md

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ browsers and devices while providing slightly more opinionated resets to common
104104

105105
## Using module bundlers
106106

107-
If you are using module bundlers like [webpack](https://webpack.js.org/),
108-
[rollup.js](https://rollupjs.org/), etc, you may prefer to directly include the package into your
109-
project. To get started, use `yarn` or `npm` to get the latest version of Vue.js, BootstrapVue and
110-
Bootstrap v4:
107+
If you are using module bundlers like [Webpack](https://webpack.js.org/),
108+
[Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/), you may prefer to directly
109+
include the package into your project. To get started, use `yarn` or `npm` to get the latest version
110+
of Vue.js, BootstrapVue and Bootstrap v4:
111111

112112
```bash
113113
# With npm
@@ -117,7 +117,7 @@ npm install vue bootstrap-vue bootstrap
117117
yarn add vue bootstrap-vue bootstrap
118118
```
119119

120-
Then, register BootstrapVue plugin in your app entry point:
120+
Then, register BootstrapVue in your app entry point:
121121

122122
```js
123123
// app.js
@@ -143,9 +143,11 @@ Or import Bootstrap and BootstrapVue `scss` files via a single custom SCSS file:
143143
@import 'node_modules/bootstrap-vue/src/index.scss';
144144
```
145145

146+
Finally import the `custom.scss` file in your app entry point:
147+
146148
```js
147149
// app.js
148-
import 'custom.scss'
150+
import './custom.scss'
149151
```
150152

151153
Be sure to `@import` or define your custom variable values _before_ including Bootstrap SCSS
@@ -156,8 +158,31 @@ Place all of the SCSS `@import`s into a **single SCSS file**, and import that si
156158
project. Importing individual SCSS files into your project will **not** share variable values and
157159
functions between files by default.
158160

159-
**Note**: Requires webpack configuration to load CSS/SCSS files
160-
([official guide](https://webpack.js.org/guides/asset-management/#loading-css)).
161+
Webpack and Parcel support prepending the `scss` modules with tilde paths (`~`) when importing from
162+
a `scss` file:
163+
164+
```scss
165+
// Webpack example
166+
@import '~bootstrap';
167+
@import '~bootstrap-vue';
168+
```
169+
170+
```scss
171+
// Parcel example
172+
@import '~bootstrap/scss/bootstrap';
173+
@import '~bootstrap-vue/src/index.scss';
174+
```
175+
176+
For more details how to configure asset loading and how modules are resolved, please consult the
177+
module bundlers documentation.
178+
179+
**Notes**:
180+
181+
- Webpack configuration to load CSS files
182+
([official guide](https://webpack.js.org/guides/asset-management/#loading-css)).
183+
- Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/))
184+
- Parcel CSS ([official guide](https://parceljs.org/css.html))
185+
- Parcel SCSS ([official guide](https://parceljs.org/scss.html))
161186

162187
For information on theming Bootstrap, check out the [Theming](/docs/reference/theming) reference
163188
section.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"module": "esm/index.js",
88
"jsnext:main": "esm/index.js",
99
"source": "src/index.js",
10+
"sass": "src/index.scss",
1011
"style": "dist/bootstrap-vue.css",
1112
"license": "MIT",
1213
"types": "src/index.d.ts",

0 commit comments

Comments
 (0)