时间戳

首页 > 解决方案 > 如何从 Vite 中的 node_modules 加载 scss 变量和字体文件

sass - 如何从 Vite 中的 node_modules 加载 scss 变量和字体文件

问题描述

我nuxt-vite在 SSR nuxt 项目中使用，这是我的代码

nuxt.config.js

module.exports = {
    css: [
        '~/assets/fonts.scss',
    ]
}

我想@mdi/font在我的项目中使用，这里是它位于 node_modules 中的位置： 在此处输入图像描述

  1. 首先，我尝试直接导入css：
@import '@mdi/font/css/materialdesignicons.css

但是浏览器找不到字体文件 在此处输入图像描述

  1. 然后，我尝试加载原始 scss 变量，就像我在使用 webpack whick 时所做的那样，没有任何问题。
@import "@mdi/font/scss/variables";
@import "@mdi/font/scss/functions";
@font-face {
    font-family: '#{$mdi-font-name}';
    src: url('@mdi/font/fonts/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
    src: url('@mdi/font/fonts/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
        url('@mdi/font/fonts/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}') format('woff2'),
        url('@mdi/font/fonts/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}') format('woff'),
        url('@mdi/font/fonts/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@import "@mdi/font/scss/core";
@import "@mdi/font/scss/icons";
@import "@mdi/font/scss/extras";
@import "@mdi/font/scss/animated";

但是 vite 无法正确加载 scss 变量： 在此处输入图像描述

使用 vite 时如何使用 node_modules 中的字体？

我用谷歌搜索并阅读了文档，但帮助不大。

非常感谢任何人的帮助！

标签： sassvite

解决方案

将此添加到nuxt.config.js

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "~/assets/styles/Variables.scss";\n@import "~/assets/styles/Mixins.scss";\n`
        }
      }
    }
  },

推荐阅读