Vue项目使用自定义SCSS文件设置全局字体不生效如何解决？

• 调整SCSS文件代码顺序
  你当前将自定义全局样式写在了引入Bootstrap、BootstrapVue样式的前面，框架默认样式会覆盖提前写的自定义规则，需要按照「变量定义→字体引入→框架样式导入→自定义样式」的顺序调整代码：

  // 1. 先定义要覆盖的框架变量
  $theme-colors: (
    "primary": #5e72e4,
  );
  $vue-slider-mark-label: (
    "font-size": 18px,
  );
  $body-font-family: 'Montserrat';
  // 去掉!default，否则已有同名变量时你的定义不会生效
  $font-size-root: 14px;
  
  // 2. 引入外部字体
  @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  
  // 3. 导入框架SCSS文件
  @import "node_modules/bootstrap/scss/bootstrap";
  @import "node_modules/bootstrap-vue/src/index.scss";
  
  // 4. 最后写自定义全局样式
  html, body, #app, .v-app {
    font-family: $body-font-family !important;
  }
  

• 提升全局样式覆盖范围
  部分UI组件内部会单独定义字体样式，你可以补充通配符规则让所有元素继承全局字体配置：

  * {
    font-family: inherit !important;
  }
  

• 确认字体资源加载正常
  你可以打开浏览器控制台的网络面板，筛选「字体」类请求，确认Montserrat字体是否成功加载，如果加载失败可以替换为本地字体文件测试。
• 检查SCSS引入配置
  确认main.ts中你的自定义SCSS文件引入路径正确，示例如下：

  import './styles/你的自定义样式文件名.scss'
  

内容的提问来源于stack exchange，提问作者Michal Kubiak