[Vuejs]-Vue less loading css "Cannot read property 'denominator' of undefined"

by

0👍

✅

I managed to get this working my ignoring less and using scss instead. So it would seem that the less compiler/loader couldn’t handle the boostrap css. Instead I now reference a new file e.g.

Import them in the main.js file

import "./styles/scss_styles.scss";

The scss_styles.scss file contents

// styling scoped to the form-builder-app so that it does not leak into the rest of the surrounding page
.form-builder-app {

    @import '../../../../../node_modules/bootstrap/scss/bootstrap';
    @import '../../../../../node_modules/bootstrap-vue/src/index';
    @import '../../../../../node_modules/vuejs-dialog/dist/vuejs-dialog.min.css';
}

This now works and allows me to scope the css just to the main control, instead of it leaking out into the surrounding page and messing up the original css. 

<div class="form-builder-app">
    <div id="app"></div>
</div>

I could also have linked it to the #app id too, but just to show this approach does work.

Leave a comment