Vue.js Import Bootstrap Scss

November 30, 2019
Custom Theme Color and Import Breakpoints

Enable Sass/Scss

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

If can also setup Sass later.

Install Bootstrap

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;
  }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.