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

【问题标题】：How to load scss variables and fonts file from node_modules in Vite如何从 Vite 中的 node_modules 加载 scss 变量和字体文件
【发布时间】：2021-06-03 04:13:09
【问题描述】：

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

nuxt.config.js

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

我想在我的项目中使用@mdi/font，它位于 node_modules 中：

首先，我尝试直接导入css：

@import '@mdi/font/css/materialdesignicons.css

但是浏览器找不到字体文件

然后，我尝试加载原始 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 中的字体？

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

非常感谢任何人的帮助！

【问题讨论】：

标签： sass vite

【解决方案1】：

将此添加到nuxt.config.js

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

【讨论】：