Vue 应用程序自定义 scss 文件 - 更改整个应用程序的字体？答案

【问题标题】：Vue app custom scss file - change font across entire app?Vue 应用程序自定义 scss 文件 - 更改整个应用程序的字体？
【发布时间】：2021-11-04 09:34:31
【问题描述】：

我正在尝试在整个 vue 应用程序中更改应用程序，我有一个自定义 scss 文件被导入到应用程序的 main.ts 中。到目前为止，我有这个，但认为它没有任何建议？

$theme-colors: (
  "primary": #5e72e4,
);
$vue-slider-mark-label: (
  "font-size": 18px,
);

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

$body-font-family: 'Montserrat';
$font-size-root: 14px !default;

v-app {
  font-family: $body-font-family !important;
}

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

【问题讨论】：

也试过了：@import url("fonts.googleapis.com/…); $body-font-family: "Maven Pro" !important;

标签： javascript css vue.js sass

【解决方案1】：

您可以通过在 <style> 标记中导入您的 google 字体来实现您想要做的事情，最好的情况是在您的主要组件 App.vue 中。

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

然后你可以这样使用它。请不要不要scope这个属性：

html, body {
  font-family: 'Montserrat', sans-serif;
}

#app {
  font-family: 'Montserrat', sans-serif;
}

【讨论】：