Incompatible units px and rem.

$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;

$font-size-base: 14px !default;
to
$font-size-base: 1rem;

@import 'variables';

Vue.component('my-component', require('./components/MyComponent.vue').default);

const app = new Vue({
    el: '#example',
});

export default {
  name: "my-component",
  props: {
    headerColor: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      input: null,
      input: null,
      input: null,
      input: null,
      input: null,
      input: null,
      input: null,
      input: null,
      input: null,
      input:
        "Some example text"
    };
  },
};

<div id="example">
    <my-component></my-component>
</div>