Skip to content

Commit 1a982ef

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

File tree

2 files changed

+31
-7
lines changed

2 files changed

+31
-7
lines changed

docs/markdown/intro/README.md

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,11 @@ 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/),
109+
you may prefer to directly include the package into your project.
110+
To get started, use `yarn` or `npm` to get the latest version of Vue.js,
111+
BootstrapVue and Bootstrap v4:
111112

112113
```bash
113114
# With npm
@@ -117,7 +118,7 @@ npm install vue bootstrap-vue bootstrap
117118
yarn add vue bootstrap-vue bootstrap
118119
```
119120

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

122123
```js
123124
// app.js
@@ -143,9 +144,11 @@ Or import Bootstrap and BootstrapVue `scss` files via a single custom SCSS file:
143144
@import 'node_modules/bootstrap-vue/src/index.scss';
144145
```
145146

147+
Finally import the `custom.scss` file in your app entry point:
148+
146149
```js
147150
// app.js
148-
import 'custom.scss'
151+
import './custom.scss'
149152
```
150153

151154
Be sure to `@import` or define your custom variable values _before_ including Bootstrap SCSS
@@ -156,8 +159,28 @@ Place all of the SCSS `@import`s into a **single SCSS file**, and import that si
156159
project. Importing individual SCSS files into your project will **not** share variable values and
157160
functions between files by default.
158161

159-
**Note**: Requires webpack configuration to load CSS/SCSS files
162+
Webpack and Parcel support prepending the `scss` modules with tilde paths (`~`) when importing from 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 module bundlers documentation.
177+
178+
**Notes**:
179+
* Webpack configuration to load CSS files
160180
([official guide](https://webpack.js.org/guides/asset-management/#loading-css)).
181+
* Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/))
182+
* Parcel CSS ([official guide](https://parceljs.org/css.html))
183+
* Parcel SCSS ([official guide](https://parceljs.org/scss.html))
161184

162185
For information on theming Bootstrap, check out the [Theming](/docs/reference/theming) reference
163186
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)