css - 为什么我有重复的导入字体样式

Question

我是前端新手，我尝试开始一个新的 Vue3 项目

我尝试将单独的 scss 文件收集到一个文件中

所以我有一个all.scss（我希望它是全局样式）并且在 all.scss 中我导入一个文件config.scss

我在config.scss中导入谷歌字体

因为我希望一些变量和 mixin 是全局的，所以我像下面这样编辑vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
            @import "@/scss/foundation/_config.scss";
            @import "@/scss/foundation/_helpers.scss";
          `
      }
    }
  }
}

最后，我 在 App.vue 中导入all.scss

问题：

当我在本地主机中执行npm 运行服务时

我得到了很多风格的导入字体

我尝试什么：

• 我@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');从config.scss更改 为直接导入App.vue

问题消失了

我不知道为什么？是我在vue.config.js中设置错误还是 webpack 做了我不知道的事情

这是我的 package.json

标签： cssvue.jswebpacksassfont-face