1

So basically I'm trying to use custom sass at work for a project but the npm run watch gives me the following error:

Incompatible units px and rem.

followed by saying the issue resides here (in _variables.scss):

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

(It is needed for the template in a vue.js component for our website)

I've tried solutions from Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix so changing 

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

doesn't work. I've also tried the other steps suggested in all of the answers. I've come across another suggestion of commenting out the following in app.scss : 

@import 'variables';

but no luck with that either. Also, inside of bootstrap.js require('bootstrap); is set so it isn't that either.

In case you need to see it, my component:

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

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

usage:

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"
    };
  },
};

php file:

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

I'm hoping that once it works I'll be able to load my component on our website so I can begin development with it. Any help is appreciated! I hope I've provided enough information as I'm about to leave work for the night but I will try my best to provide more before I get back if needed.

miken32
  • 42,008
  • 16
  • 111
  • 154
cgaudet
  • 55
  • 1
  • 9
  • I don't know anything about sass, but are `$line-height-computed` and `$padding-base-vertical` the same unit? Maybe one is `px` and the other is `rem` ? Maybe `2` is considered `px`? – Matt Jun 20 '19 at 20:09
  • It could be but I won’t have access to the code til tomorrow morning. I’m not sure I understand why that would cause an issue – cgaudet Jun 20 '19 at 20:45
  • Because `rem` is a relative unit, `px` is absolute. You cannot know the `px` value of a `rem` number unless you know the root `px` value of `font-size` – Matt Jun 20 '19 at 21:00
  • Ohh, maybe that’s it then – cgaudet Jun 20 '19 at 22:29
  • So I changed both so that they are px and still no luck (gives the same error at the same spot of ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js): undefined ^ Incompatible units px and rem. ╷ 300 │ $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ – cgaudet Jun 21 '19 at 10:59

1 Answers1

0

You can use the calc() function when you have calculations that contain variables of different types.

eg

$a: 10px;
$b: 25%;

.mydiv {
  width: calc(#{$a} - #{$b});
}

And the #{} converts them to string so that sass wouldn't make arithmetic using them while compiling

Abraham
  • 12,140
  • 4
  • 56
  • 92