Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error:
Incompatible units px and rem.The root of the issue seems to be in _variables.scss where the following line resides:
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;This customization is essential for our website's vue.js component template.
Despite trying various solutions from Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix, such as changing:
$font-size-base: 14px !default;
to
$font-size-base: 1rem;No fix seemed to work. I even experimented with suggestions like commenting out '@import 'variables';' in app.scss and adjusting require('bootstrap') in bootstrap.js without success.
If you wish to review my component, here it is:
Vue.component('my-component', require('./components/MyComponent.vue').default);const app = new Vue({
el: '#example',
});Furthermore, take a look at how I incorporate it:
export default {
name: "my-component",
props: {
headerColor: {
type: String,
default: ""
}
},
data() {
return {
input: "Some example text"
};
},
};When setting up the PHP file, remember:
<div id="example">
<my-component></my-component>
</div>I am eager to resolve this issue so that I can progress with development on our website. Any assistance would be greatly valued! If further details are needed, please let me know. Thank you for your help!