Vue.js Import Bootstrap Scss

Nov 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;  }}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.