Question

因此，基本上，我试图在项目中使用自定义sass，但是npm run watch给我以下错误：

Incompatible units px and rem.

接着说问题出在这里（在_variables.scss中）：

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

（我们网站的vue.js组件中的模板是必需的）

我尝试了Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix的解决方案所以改变

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

不起作用。我还尝试了所有答案中建议的其他步骤。我在app.scss中遇到了另一条建议：

@import 'variables';

但也没有运气。另外，在bootstrap.js内部require（'bootstrap）;设置了，所以也不是。

如果您需要查看它，我的组件：

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

php文件：

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

我希望一旦它能够工作，我就可以将我的组件加载到我们的网站上，以便我可以开始使用它进行开发。任何帮助表示赞赏！我希望在晚上要离开工作时已经提供了足够的信息，但是如果需要，我会尽力提供更多信息。

Answer 1

当您的计算包含不同类型的变量时，您可以使用 calc() 函数。

例如

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

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

并且 #{} 将它们转换为字符串，以便 sass 在编译时不会使用它们进行算术

px和rem单位不兼容（当前解决方案无效）

1 个答案: