Css 不兼容的设备px和rem（当前的解决方案不起作用）

因此，基本上我尝试在项目中使用自定义sass，但npm运行监视给了我以下错误：

Incompatible units px and rem. 

然后说问题就在这里（在_variables.scss中）：

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

我已经尝试了来自世界各地的解决方案 如此变化

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

不起作用。我还尝试了所有答案中建议的其他步骤。我在app.scss中遇到了另一个注释以下内容的建议：

@import 'variables';

但这也没什么好运气。另外，bootstrap.js的内部需要（“bootstrap”）；也不是这样的

如果你需要看的话， 我的组成部分：

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

用法：

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>

---

我希望，一旦它的工作，我将能够在我们的网站上加载我的组件，这样我就可以开始与它的发展。感谢您的帮助！我希望我已经提供了足够的信息，因为我将在晚上下班，但如果需要的话，我会在回来之前尽力提供更多信息。

我对sass一无所知，但是

$行高度计算

和

$padding base vertical

是同一个单位吗？也许一个是px，另一个是rem？也许

2

被认为是

px

？可能是，但我要到明天早上才能拿到代码。我不确定我是否理解这会导致问题，因为

rem

是一个相对单位，

px

是绝对单位。除非您知道

font size

Ohh的根

px

值，否则您无法知道

rem

数字的

px

值，可能就是这样，所以我将两者都更改为px，但仍然没有运气（在模块构建错误的同一位置给出相同的错误：模块构建失败（来自./node_modules/sass loader/lib/loader.js）：未定义^px和rem不兼容单元。╷ 300│ $输入高度基准：（$line height computed+（$padding base vertical*2）+2）！默认值；│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^我对sass一无所知，但是

$line height computed

和

$padding base vertical

是同一个单位吗？可能一个是

px

，另一个是

rem

？可能

2

被认为是

px

？可能是，但我要到明天早上才能获得代码。我不确定我是否理解w因为

rem

是一个相对的单位，

px

是绝对的。你不能知道

rem

数字的

px

值，除非你知道

font size

Ohh的根

px

值，也许就是这样，所以我把它们都改成了px，仍然没有运气（在ModuleBuildError的同一位置出现相同错误：模块构建失败（来自./node_modules/sass loader/lib/loader.js）：未定义^px和rem单元不兼容。╷ 300│ $输入高度基准：（$line height computed+（$padding base vertical*2）+2）！默认值；│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

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

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