• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Modifying Bootstrap Installed Via Bower

General · July 20, 2014

If you are like many front-end web developers out there, you are most likely using some kind of front-end package management solution like Bower.

Recently whilst working on a project that required Bootstrap 3 (the SASS port) installed via Bower, I realised I needed to make some changes to buttons and fonts being used, the caveat of course being not editing the files within the bower_components folder itself, otherwise you can’t update them.

After trying different solutions like a custom Gulp.js runner task, I realised I was overcomplicating the solution. Here is what I believe to be the best solution

Copy the Bootstrap variables file from the Bower module to your local directory. In my case the file is: bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss – in my local directory I have a folder called “sass” and within that folder I have a folder called “modules” and within modules I create a new folder for each module modification, in this case I called it “bootstrap”

In my main SASS include, I simply reference the copied variables file first and then include Bootstrap after (see example code below)

// main.scss

// This is the copied version of the Bootstrap SASS variables file to a local SASS folder
@import "sass/modules/bootstrap/_variables.scss";

// Include Bootstrap itself
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap.scss";

Our copied variables file will take precedence over the one in the Bower module and presto, we can now modify Bootstrap in a clean way that won’t break when we upgrade.

This approach would also work for the standard LESS version of Bootstrap and other modules that work in this way too.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Markus
Markus
7 years ago

So you only make changes to that one file? What if I need to change more?

0
salsas
salsas
7 years ago

Yo simplemente sólo no podía salir Página web antes de antes de sugerir que yo realmente realmente disfruté
el estándar info una persona suministro para su huéspedes?
Se va a atrás frecuentemente a inspeccione Buscar mensajes nuevos

0
cuando hacer ecografia 4d
cuando hacer ecografia 4d
7 years ago

Al final todo se resume en una frase:
Todos tenemos orígenes comunes: las madres; todos venimos de la
misma sima, pero cada uno tiende a su propio fin- Hermann Hesse 🙂 ¡Un saludo!

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • Web 3.0 may have died before it even started
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • A List of WordPress Gutenberg Core Blocks
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz