Seeking assistance on how to troubleshoot this issue.
In a Vue project, buefy is imported from main.js as follows:
import Vue from 'vue'
import Buefy from 'buefy'
import './style.scss'
Vue.use(Buefy)
import Client from './client.vue'
let vm = new Vue({
el: '#app',
render: h => h(Client)
})
, with style.css importing buefy/bulma styles:
@import "~bulma/sass/utilities/_all";
[...]
@import "~bulma";
@import "~buefy/src/scss/buefy";
The goal is for Buefy/Bulma css to be overridden by styles specified in single file vue components like:
<style lang="scss">
.logLine{
margin: 0px;
padding: 1em;
}
</style>
An interesting finding is that while padding successfully overrides bulma styles (as expected), margin gets overridden by bulma styles:
View screenshot from Firefox CSS inspector
It appears that styles from bulma/sass/base/minireset.sass are being overridden by the .logLine style definitions within the single file component. However, the .logLine styles are being overridden by bulma/sass/elements/content.sass.
The expectation is for the styles from .logLine to override all Buefy/Bulma styles.