Vue.js Import Bootstrap Scss

Enable Sass/Scss

When setup Vue project via Vue CLI, remember to enable Sass/Scss.

If can also setup Sass later.

Install Bootstrap

npm install bootstrap --save

NOTE: You might want to consider using BootstrapVue.

Import SCSS

You can import Bootstrap SCSS via script, but you won't be able to overwrite theme variable.

import 'bootstrap/scss/bootstrap.scss'

To import SCSS, there are 2 ways:

Import Scss via .scss file

Create src/assets/app.scss.

@import '~bootstrap/scss/bootstrap';

Edit main.js.

import './assets/styles/app.scss'

Import Scss via App.vue

Assuming you have App.vue, which is the root of all others components. You can include Bootstrap scss file via <style> section.

<template>  ...</template><style lang="scss">@import '~bootstrap/scss/bootstrap';</style>

The main.js should load the App.vue component.

import App from './App.vue'new Vue({  router,  render: h => h(App)}).$mount('#app')

Overwrite Primary Color

$theme-colors: (  "primary": #17a2b8);@import '~bootstrap/scss/bootstrap';

NOTE: Refer Theming Bootstrap

Import Breakpoints

@import '~bootstrap/scss/_functions';@import '~bootstrap/scss/_variables';@import '~bootstrap/scss/mixins/_breakpoints';.content {    padding: 16px;}@include media-breakpoint-down(sm) {  .content {    padding: 8px;  }}