React 应用程序中的字体不适用于 .scss 扩展名

Question

我使用 Vite 和 React + SCSS。

我有 fonts.scss，我在项目中使用所有字体：

@font-face {
    font-family: "JosefinSans";
    src: url("./JosefinSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "JosefinSans";
    src: url("./JosefinSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

但是当我尝试在项目的不同路径上导入字体时，如下所示：

@import "./assets/fonts/fonts.scss";
@import "./assets/colors/colors.scss";

body {
    margin: 0;
    font-family: "JosefinSans";
    background-color: $border-light;
}

我的字体不起作用。它们仅在我编译为 .css 并使用 .css 文件导入时才起作用。

我尝试检查它是否适用于 .css 文件，确实如此。但是，我只想在我的项目中使用 .scss。

在 package.json 文件中，我有 sass，并且检查了其他 .scss 代码（例如变量）是否有效。一切正常，但字体不起作用。

Answer 1

从 SCSS 文件导入字体时，路径解析似乎存在问题。确保路由配置正确。

1. 检查Vite的SCSS配置：

   从“vite”导入{defineConfig}； 从'@vitejs/plugin-react-refresh'导入reactRefresh； 从“路径”导入{解析}；

   导出默认的defineConfig({ 插件：[reactRefresh()]， CSS：{ 预处理器选项：{ scss: { 附加数据：

   @import "${resolve(__dirname, 'src/assets/fonts/fonts.scss')}";

   ， }, }, }, });

2. 检查字体文件是否复制到输出目录： vite.config.js：

   导出默认的defineConfig({ 建造： { 资产内联限制：0， outDir: 'dist', 资产目录：'资产'， }, });

请检查我的解决方案，如果不起作用，请给我反馈，以便我修复它。 我将提供另一种解决方案。